Building Android Apps With Python: Part -2

Step by Step Guide to Build Android Apps using Python

In the previous part, we discussed

1. What is Kivy and how to use it
2. Why Kiymd is required
3. And built a basic app displaying “Hello world”

If you haven’t read the previous post then I highly recommend you to have a look at Part-1 so that you are familiar with the terminologies:

Building Android Apps With Python: Part -1

In this second part, we will look at various key elements of Kivymd which are the building blocks of any app.

Photo by Priscilla Du Preez on Unsplash

String Builder

Before we proceed to various components of the app-building, I want to bring out a useful feature of integrating Kivy with Kivymd. Kivy has its own language that is dedicated to describing the user interface and various interactions. It is useful as the UI file can be separated from the logic file making the code more readable and manageable. We should separate these logics as in the .kv file, we don’t have to make any import statements. We need not worry about where the specific element is located in the Kivymd directory, also we don’t need to explicitly bind a widget to its root widget. KV files follow a hierarchical structure where you can define one root widget and whenever you define components below this, they are by default added to the root widget. We will look at this concept once again in MDLabel's example.

Key Elements of KivyMD

We have talked enough about the basics, let’s dive-in into the building blocks of app-building:

Screen

All the things require a stage. The screen element is the first thing an app will have. All the activities, components are defined on a screen. It is defined simply by calling it in the KV file.

Screen:
    components
    .
    .
    .

MDLabel

We have used this component several times during the introduction and demo part. This component makes it possible to display any text on your app screen. We can display any component in many ways:

Logic file

Kivy Language file

Or the other way:

Label without Kivy Builder

Both of them returns the same output:

Example of MDLabel

MDLabel has various properties to customize:

1. font_style: Available options are ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’, ‘Subtitle1’, ‘Subtitle2’, ‘Body1’, ‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.
2. text: The text you want to display on the app.
3. theme_text_color: Available options are ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’, ‘Custom’, ‘ContrastParentBackground’.
4. text_color: Text color is given in RGBA format. The values are given as percentage values and not absolute values. It means that the RGB values you have chosen must be divided by 255 to get the percentage values. Note that while using custom colors, you need to specify theme_text_color to custom. Consider this example:

text_color=(1, 0.2, 0.3, 1),
theme_text_color='Custom'

When this is applied to the existing example, you will get this result:

MDLabel with customized color

5. halign and valign: We can assign the position of the text horizontally and vertically. Available options are auto, left, center, right, and justify.

6. markup: We can use the markup language to customize the text. You need to specify markup = True to use the markup options. Check the kivy markup documentation for all the available actions.

All the properties discussed here remain the same for most of the components except the ones that are exclusive for Labels. You can check more options in the official documentation.

MDButton

It enables you to make the UI interactive by binding the button action with other widgets. These bindings are performed by referring to each other ids. There are various types of buttons available in Kivymd and you can choose any button which suits your requirements. Available options are:

• MDIconButton
• MDFloatingActionButton
• MDFlatButton
• MDRaisedButton
• MDRectangleFlatButton
• MDRectangleFlatIconButton
• MDRoundFlatButton
• MDRoundFlatIconButton
• MDFillRoundFlatButton
• MDFillRoundFlatIconButton
• MDTextButton
• MDFloatingActionButtonSpeedDial

I have coded an example which covers the most frequent buttons used for better understanding:

Different Types of Buttons

Here I have separated the UI code in a variable and then loading that variable in the builder method. This is also a great approach if you don’t want to make separate files and manage the whole code in one file. The output is:

GIF by Author

Let’s understand what’s going on:

1. Different buttons are displayed on the same screen.
2. Various icons can be included in buttons. Check out the whole list of supported icons here.
3. The floating action button is something new here. It is widely used to give relevant social media links, share options, and many more actions depending on your creativity. It is getting the data to be displayed from the backend layer, our python code in the form of a dictionary where the key is the icon name and the value is text to be displayed. The app.data searches in the app (the root widget) for the data variable and the Main class of our app hold that variable. It means we should define these variables in the class it belongs to, you will get a better idea when we will build apps with multiple screens.
4. The action button is also new. The action which I have associated with this button can be done for any button type. Buttons have a lot of properties for every type but the most common of them is on_release, on_press, on_close. As the name depicts they are triggered when that specific action occurs. Check the documentation for all the actions.

MDTextField

Now we want to take inputs from the user, process it, and display the results. MDTextField makes it super easy to customize a base text input. It also comes in 3 classes MDTextField, MDTextFieldRound, and MDTextFieldRect. A text field has the input line, some light text (here known as hint text) to indicate what to input, some additional information below the line (here known as helper text), and sometimes an icon too. Let’s take an example:

Example of MDTextField

GIF by author

When the user taps on the field, the hint text automatically shifts on the top. Some useful properties of MDTextField are:

1. The helper text has various modes: “focus”, “persistent” and “error”. In “focus” mode, the helper text only appears when the text field is focused or tapped whereas, in “persistent” mode, the helper text always appears.
2. We can specify whether the field is required or not using required=True, control the length of text using max_text_length, or make it multi-line input.
3. The input can be taken to the python layer by defining an object property in the base class of the app and defining its reference in the KV file which references the id of the text field. See this example:

from kivy.properties import ObjectProperty
#In the KV part add this,
"""
Screen:
    variable_in_class: id_of_text_field
class Main(MDApp):
    variable_in_class = ObjectProperty(None)
    .
    .
    .
    # when you want to use that input text use:
    answer = self.root.variable_in_class.text

Check out other properties here.

Let's make a basic app!

We have covered only a portion of elements but before ending this article let’s combine what we have learned till now into a minimalistic app that takes password as input to display whether we are the root user or not. I would suggest you open up your IDE’s and try to build it yourself and compare it with my code!

Combining what I have discussed so far

Conclusion and what’s next

In this part, we covered the basic building blocks of Kivymd: Screen, MDLabel, MD Buttons, and MDTextField. In the next article, we will continue our journey and explore other complex and highly used components. If you liked this article, follow me on medium so you receive notifications about upcoming parts. With that said sayonara!

You can find me here:
LinkedIn: Link

GitHub: Link

Update: Part-3 is here:

Building Android Apps With Python: Part -3