Python Apps on Android For Beginners

On this video you are going to learn how to install Git, Pyenv, Poetry and Kivy on Windows operating system.

Timestamps: 

1:13 Step 1: Install Git

3:11 Step 2: Installing Pyenv

8:04 Step 3: Install Python using Pyenv

9:44 Step 4: Install Poetry

15:53 Step 4b: Poetry configuration

17:36 Step 5: Install VS Code

19:04 Step 5b: Install Kivy using Poetry

30:23 Running Kivy Hello World

On this video you are going to learn how to install Git, Pyenv, Poetry and Kivy on macOS operating system.

Timestamps:

1:53 Step 1: Install Homebrew

4:23 Step 2: Install Xcode Command Line Tools

5:22 Step 3: Install Pyenv

7:39 Step 4: Install Python using Pyenv

9:28 Step 5: Install Poetry

11:08 Step 5: Poetry configuration

12:42 Step 6: Start a Kivy project using Poetry

14:40 Warning: Please, install VS Code

14:54 Step 7: Run a Kivy "Hello World" example

Step-by-step article explaining how to install git, Homebrew, Xcode Command Line Tools, Pyenv, Python, Poetry, on macOS operating system.

On the end we run a Kivy "Hello World" example.

On this video you are going to learn how to install Git, Pyenv, Poetry and Kivy on Ubuntu operating system.

Step-by-step article explaining how to install Git, Pyenv, Python, Poetry on Ubuntu operating system.

On the end we run a Kivy "Hello World" example.

1. git clone https://github.com/kivy-school/kivy-viewer

2. cd kivy-viewer

3. poetry install

4. poetry shell

5. python main.py

Simple comparison of how to create Python classes, with properties and values, to creating the same classes using Kivy Language.

Learn how to declare KV rules and learn how inheritance works in KV Language.

Executing functions when pressing / releasing the button. (on_press / on_release)

Accessing button properties using self

Learn what is a canvas and how to draw lines, rectangles with different colors, sizes and positions using context instructions and vertex instructions

In this lesson we compare the declaration of variables in Python with declaring them in KV Language.
We also compare importing libraries and classes in Python with importing in KV Language.
On the end we create a very simple App example using the concepts learned

How to declare variables in Python vs declaring variables in KV Language:

Python:
selected = True

KV:
#:set selected True

How to import libraries, functions, classes in Python vs importing in KV Language:

Python:
import random
import numpy as np

KV:
#:import random random
#:import np numpy

You will learn how to transform a Figma design into a polished, professional screen using Kivy. In Part 1 of this lesson, you'll focus on understanding the layout and positioning of elements using placeholders. We’ll guide you through replicating the design structure without diving into specific widgets yet. In Part 2, you’ll replace those placeholders with actual widgets to bring the screen to life, resulting in a professional-quality interface based on a Figma template.

Figma template URL: 

https://www.figma.com/design/BY5el2AblanBwBI1rKHf5N/Section-2---Three-screens?node-id=0-1&t=xVp4B3WlMLkgrwoi-0

Tailwind Colors:

https://tailwindcss.com/docs/customizing-colors

You will learn how to transform a Figma design into a polished, professional screen using Kivy. By the end of the lesson, you'll have the skills to turn a static template into a visually appealing interface, mastering the process of translating design mockups into real-world applications.

On this lesson we finish the creation of the Onboarding screen from our Figma template: https://www.figma.com/design/BY5el2AblanBwBI1rKHf5N/Section-2---Three-screens?node-id=0-1&t=xVp4B3WlMLkgrwoi-0

- You will learn basic usage of Image, Label and Button.
- You will create custom components with dynamic property
- You will see on practice how to declare variables in KV file
- You will see the usage of context instructions, like Color, and vertex instructions, like Rectangle, RoundedRectangle and SmoothRoundedRectangle.

Here you will learn the basics of Git.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Making the second Figma screen.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Making the second Figma screen.

Making the second Figma screen.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Making the third Figma screen.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Making the third Figma screen.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Making the third Figma screen.

Canva slides link: https://www.canva.com/design/DAGbzaUwDM0/7D57tfCLPKoDyOQy4AC5KA/view?utm_content=DAGbzaUwDM0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h649b91b296

Learn how to install Kivy Reloader on your project with all the necessary dependencies.

Learn how to setup and use Kivy Reloader for your projects.

Part 1: Learn how to install WSL2 and prepare to setup your machine for developing on Android.

Part 2: Learn how to use Kivy-Reloader in WSL2.

Part 3: Learn how to properly debug your Kivy app on Android and computer simultaneously.

Part 1: Learn how to install and use Kivy-Reloader on Windows.

Learn the basics of Kivy properties and event dispatching with practical examples.

- Understand why Kivy properties exist and how they differ from Python properties.

- Learn how `EventDispatcher` enables reactive UI updates.

- How to use NumericProperty and StringProperty

- Explore type validation, automatic property binding in KV files, and how Kivy ensures UI consistency through event-driven interactions.

In this lesson, you'll learn how to use OptionProperty in Kivy to restrict a property to a predefined set of values. We'll create a difficulty selector where a CheckBox controls the difficulty level, ensuring only valid options (easy, medium, hard) are allowed.

You will learn:

- How OptionProperty enforces value constraints.
- How to use CheckBox groups to allow only one selection at a time.
- How to react to property changes using on_active event.
- How to update UI elements dynamically based on property updates.

By the end of this lesson, you’ll have a functional difficulty selector that reacts to user interactions while maintaining strict control over allowed values.

Learn about: 

• Python attributes

• Python properties

• How to set a Python property using property([fget=None, fset=None, fdel=None, doc=None])

• How to set a Python property using @property, @property_name.setter, @property_name.deleter

• Basic Kivy Properties

  • StringProperty, NumericProperty, DictProperty, ListProperty

• Know to inherit EventDispatcher to make Kivy Properties work

• Kivy Properties have type checking

• How to handle errors with Kivy Properties by yourself

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• You will learn:

  • How to stay in 1 py file. For this we use Builder.load_string to load KV as a string instead of loading from a text .kv file.

  • How to avoid calling super()

  • See the difference between hardcoding and referring to property. When you click buttons your text will change instead of staying the same because they reference Kivy Properties!

  • How to use ColoredBox and LabelB from a previous lesson (creating Screen2 and Screen3 in Section 3)

  • What are root widgets

  • How to use an ObjectProperty

  • How to use breakpoint() and on_release to inspect your app.

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• In this lesson you will learn:

  • How to observe Kivy properties

    • observe using on_propertyname

    • observe using bind

    • syntax:

      • EventDispatcher_class.bind(Kivy_property = Function_name)

  • Properties only fire events when their value changes

  • Kivy binds are called in reverse order

  • Do NOT reassign Kivy Properties at the class level! They will be rewritten!

  • Only the top level of Kivy Properties are tracked.

  • If your callback takes too long, it lags out Kivy App and makes it unresponsive.

  • When using on_propname you might accidentally overwrite the base class’s on_propname. To fix this, call super().on_propname()

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• What you will learn in this lesson:

  • How to bind in KV

  • How to bind in Python (the preferred way)

  • How to overwrite methods in Python (will cause errors)

  • All events are called, KV events, Python binds, Python overwrites

  • You can bind to an event with the same function multiple times, but bind is made so that duplicate events are not created.

    • This makes Python event binding the safer option:

      • You do not need to call super()

      • Multiple events won’t be created in case you accidentally bind the same event twice

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• You learned about AliasProperties:

  • Kivy properties that need a getter, setter like regular properties

  • AliasProperty also binds to other Kivy Properties with the bind argument

  • With binding, you can have one Property react to a change in any one of the bound properties

  • If you want a read only AliasProperty, set the setter function as None.

  • Returning True in the setter function dispatches more recalculations.

  • You can also bind to the AliasProperty like a regular Kivy property

  • AliasProperties can be cached with cache=True, so events will only be dispatched when the AliasProperty or its bound properties change. Good for performance!

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• In this lesson you will learn:

  • How to unbind properties

  • When and why you should use rebind=True for ObjectProperties (when you want to change bindings to another ObjectProperty automatically)

  • How to inspect what events are called when a property is changed with get_property_observers.

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

• In this lesson you will learn:

  • How to turn on the monitor module to check Kivy’s FPS

  • How to use Kivy Clock

    • schedule once

    • schedule interval (recurring event)

    • schedule before frame (instant)

    • unschedule an event

    • trigger events (stop events from being called multiple times)

Canva slides link: https://www.canva.com/design/DAGeKkI_06Q/jNOJPpL4c8xinNUHAGqrEw/view?utm_content=DAGeKkI_06Q&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3a766fadd1

Section 5 will prove that you can create any screen or component designed by a professional in Figma. You'll gain the confidence and skills needed to work in a professional environment, ready to create real-world projects.

• How to create a professional app structure, organizing your files and folders efficiently.

• How to use Screen and ScreenManager.

• How to use GridLayout, RelativeLayout, FloatLayout and AnchorLayout.

• How to use ScrollView.

• How to use properties like StringProperty, ObjectProperty, ListProperty, BooleanProperty, NumericProperty, ColorProperty.

• How to use behaviors like ButtonBehavior and TouchRippleButtonBehavior.

• How to create a simple JSON database.

• New canvas instructions like SmoothEllipse, SmoothLine and BoxShadow.

• How to create a color gradient.

• How to lazy load screens and components.

• How to create your app theme with custom color palette and custom fonts.

• How to use basic git commands, like git push, git commit, git add, etc.

In this video, we'll go step-by-step on how to get your project up and running:

• Create & Clone a GitHub Repository: Learn how to set up a new repository on GitHub, clone it to your local machine, and organize your project folders.

• Configure Kivy Reloader: Set up Kivy Reloader to enable hot-reloading.

• Install Essential VS Code Extensions: Learn how to use some VS Code extensions like Ruff, isort, GitLens, GitHub Pull Requests, and Gitmoji.

• Code Formatting & Linting: Integrate Ruff and isort to maintain consistent code style and automatically sort your imports.

• Set Up Gitignore: Properly configure your .gitignore file to exclude unnecessary files from the remote repo.

• Optimize Your Development Environment: Configure tools like Poetry and Taskipy for managing dependencies and automating tasks.

By the end of this tutorial, you'll be ready to start building the delivery app UI with best practices in version control and development tools.

Figma link - https://www.figma.com/design/TiaLWd3pIQgxCk4lYL5nC4mR/Delivery-App

- Folder Structure - Organized and Scalable

Learn how to create a clear and efficient Folder Structure for your projects. This structure is essential to make the code more organized and easier to navigate, especially for large-scale projects.

- App Theme & Custom Components

From the Figma design, we show how to create custom color palettes and use unique fonts.

Figma link - https://www.figma.com/design/TiaLWd3pIQgxCk4lYL5nC4mR/Delivery-App

- Splash Screen & Initial App Launch

We created our Splash Screen step by step.

- Custom Components

From the Figma design, we show how to create custom components that give the app a professional look.

With these elements in place, the Delivery App is taking shape beautifully.

In this lesson, we review everything accomplished so far by reviewing the Splash Screen code. We'll also push all the changes to GitHub and introduce key development tools to improve efficiency:

• Debug Screen: A powerful widget that overlays your app screen with the original Figma design, allowing for direct comparisons. With a simple switch behavior, you can toggle between your design and the Figma source to easily identify layout differences.

• Automation Tools: create scripts like:

  1. create_screen.py: Automates the creation of new Kivy screens, reducing the need for repetitive boilerplate code.

  2. create_component.py: Simplifies the setup of new UI components, saving a lot of time when creating new custom components.

We'll also review the logic behind the app’s theme, color palette, and font styles.

Figma link - https://www.figma.com/design/TiaLWd3pIQgxCk4lYL5nC4mR/Delivery-App

Building the ItemCard for the Categories Screen in the Delivery App

In this lesson, we will create the ItemCard component, a key element of the Categories Screen in our delivery app. The ItemCard represents each product category, displaying an image, a title, and the number of available items.

You will learn how to:

- Use GridLayout to position multiple ItemCards dynamically.
- Apply padding and spacing for a GridLayout.
- Create a custom ItemCard component with a border, background, image, and text.
- Use StringProperty and NumericProperty to dynamically assign category names and item counts.
- Ensure correct image alignment and rounded corners using canvas instructions.

By the end of this lesson, your Categories Screen will have a professional, polished look, closely matching the original design. Next, we’ll complete the screen by adding the TabBar component! ?

This lesson walks through the complete release workflow for a Python/Kivy app. You will generate a signed Android App Bundle (AAB) using Kivy Reloader, then upload it to the Google Play Console, configure all required metadata and compliance forms, and publish the app to the Play Store using macOS, Ubuntu, or WSL2.