Labels, Input and GUI Layouts

In this kivy tutorial python we will create a basic GUI that represents a form. The form will have input for a first name, last name and email address. To do this we will be using something called a grid layout, labels and text input boxes.

Importing Modules

Before we can start we need to import the following modules from Kivy.

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput

Creating a Grid Layout

In the last video we simply told kivy to build a Label by returning "Label(text=tech with tim)" from our MyApp class. In this video we will create another class that will contain all of the elements in our GUI. We will then create an instance of that class and return that from the build method. This way we can build more than one widget/element for our application.

This class will inherit from the class GridLayout (that we imported above). This will allow us to use all of the functionality of the GridLayout module created for us by kivy.

When we inherit from GridLayout we need to call it's constructor. To do this we call super().init() passing in a few arguments.

class MyGrid(GridLayout):
    def__init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)

# We use **kwargs because we don't know how many arguments we may receive. 

Adding Elements

Since we inherited from the GridLayout class there are tons of methods and attributes that we can access from inside of our newly created class.

The first thing we need to do is configure the number of columns. Since we are using a GridLayout we will need to define a number of columns for our widgets/elements to be organized in. When we add widgets the columns will be filled and new rows will automatically be created.

class MyGrid(GridLayout):
    def__init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)
        self.cols = 2 # We define the amount of columns to be 2

Next we will add a label and a text input box to our Grid Layout. Since we specified two columns when we add these they should be beside each other.

class MyGrid(GridLayout):
    def__init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)
        self.cols = 2
        self.add_widget(Label(text="Name: "))  # Add a label widget 
        self.name = TextInput(multiline=False)  # Create a Text input box stored in the name variable
        self.add_widget(self.name)  # Add the text input widget to the GUI

Now if we change MyApp class to return MyGrid() then we are ready to test the program.

class MyApp(App):
    def build(self):
       return MyGrid()

When we run the program we should see the following. Note that it is fully re-sizable.

Adding More Widgets

Adding more widgets is fairly straight forward. We can simply copy the code we've already written and modify a few names.

class MyGrid(GridLayout):
    def __init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)
        self.cols = 2

        self.add_widget(Label(text="First Name: "))
        self.name = TextInput(multiline=False)
        self.add_widget(self.name)

        self.add_widget(Label(text="Last Name: "))
        self.lastName = TextInput(multiline=False)
        self.add_widget(self.lastName)

        self.add_widget(Label(text="Email: "))
        self.email = TextInput(multiline=False)
        self.add_widget(self.email)

When we run the code we get the following GUI. Note, this is resized.

EXPERIMENT: Try changing the value of self.cols and see what happens!