Learning Kivy with Example: Part II
Learning Kivy with Example: Part I**
In the last part we created the skeleton of our app, it helps us visualize what our app contains and what it will possibly do. This time we will gradually build the user interface for the application. Kivy is quite powerful and we already did a very important thing about the GUI while creating our container. We will see how it comes handy.
Let's Begin . . .
Let's open the main.kv file. Kivy uses its own templating language to create the GUI. its called KV. It is quite simple and has a similar indentation based child class system.
Lets Plan out our app first.
as we have 3 buttons and an output area we can have multiple ways to put them. In our case, we will try to follow this pattern, 3 buttons on the 1st row and the bottom row, which is for the output
+--------+--------+--------+
| | | |
|________|________|________|
| |
| |
+--------------------------+
In our main.kv file we need to target the Container class, Just like we target HTML tags in CSS. As we can see our layout would need two rows. and in the top row, we need 3 buttons that are placed horizontally. For the buttons, we can use BoxLayout. It provides a simple solution of placing the buttons horizontally or vertically just by setting the orientation attribute. We also bind the functions we created for the functionalities in our Container. For the output we will use the Label Attribute, it helps us display string right where it is set to display. For that, we add a Label attribute and give it an id of 'display', so that later we can call it by its nID. To do that we can write
<Container>:
rows:2
BoxLayout:
orientation:"horizontal"
AddButton:
on_release:root.add_one()
SubtractButton:
on_release:root.subtract_one()
MultiplyButton:
on_release:root.multiply()
Label:
id: display
font_size: dp(50)
text:'0'
See there it a text attribute in the Label, we set 0 as the default value when we run the app. This value will be used throughout the app and based on this value will add, subtract, or multiply. Now it is a string. we would need to convert to INT in order to make arithmetic operations.
Now Let's Create Individual properties of each button. Let's head to the buttons.kv file which is inside the kv folder in our project directory.
Remember, we had 3 individual classes in the main .py file just under the Container class? Now we will target those 3 button classes and provide some attributes and value to them.
<AddButton>:
text: "+1"
font_size: 50
<SubtractButton>:
text: "-1"
font_size: 50
<MultiplyButton>:
text: "x * y"
font_size: 50
We put text +1 in the add button so that it shows in the button and becomes easily understand what it does. we put a decent font size so that it is easily visible. we did the same for the rest of the buttons.
By doing this our GUI is ready. To view it with all its glory we need to load these buttons attributes in the main.py file. when they are loaded we can see exactly how our app looks like, let's do that
To load the .kv file we need a kivy package called Builder. Builder loads the file in the main.py and makes it accessible throughout the application.
from kivy.lang import Builder
Builder.load_file("./kv/buttons.kv")
it is ok for one or two kv files. but when there are too many GUI components and too many kv files this can be very difficult to manage. Keeping that in mind we can use a very neat trick from now on so that no matter how many kv files are there we load everything without having to think much. The only thing to remember is to keep the .kv files inside kv folder. then we can replace the ' Builder.load_file("./kv/buttons.kv") ' with,
from os import listdir
kv_path = './kv/'
for kv in listdir(kv_path):
Builder.load_file(kv_path + kv)
We use Python's built-in os library to get all the files on the given folder path, in our case the kv folder. We check all the files available and load them all with the builder.
Go ahead and run the project. You will see the GUI of our application popped in the screen with 3 buttons and an output section as we intended to do.