Kivy For The Non Computer Scientist – Part 4: A Little About Kivy’s Screen Layouts

Everything I’ve covered to this point in this series of blog posts relating to Kivy has been well covered by other Kivy community members and educators. But as I traveled down my learning path of Kivy over the past few weeks, other than my weak understanding of OOP principles, it was when I hit screen layouts I got stymied for a while.

The reason was because just about every resource I came across provided too much information (TMI) on how the eight different screen layout classes arranged widgets and how widget properties are employed to size and proportion said widgets on the screen. The experience was mind-numbing. To my way of thinking it’s best to start with one screen layout object, first learn how to invoke it and then at a later date learn more about its properties and characteristics and proceed with confidence. That’s why I titled this post “A Little About Kivy’s Screen Layouts”.

For the purposes of this blog post and the code associated with it we are going to use Kivy’s GridLayout. As mentioned earlier screen layout objects are used to position widgets on Kivy’s GUI and a grid layout is probably the easiest to understand.

gridlayout

The image above from kiby.org demonstrates how Kivy’s GridLayout works. By setting the maximum amount of widgets you want arranged by either rows or columns, the screen widgets are automatically assigned a position determined by the layout configuration.

maxresdefault

Recall Matt Richardson’s Kivy interface (above) that was shown in Part 1 of this blog. If  I wanted to duplicate it, I would start with a Grid Layout and set the value of its col property to five. By adding an image widget, three button widgets and one slider widget (in that order) the widgets would arrange themselves in their appropriate columns into the grid layout as it appears above. Note that Screen Widgets get added to a Kivy GridLayout from left to right.

Lets Get To The Code!

To keep thing really simple were going to start with only two columns on our grid layout. The Python code below creates a two column Kivy grid screen layout onto which two screen widgets appear. One being a Button Widget and the second being a Label Widget;

gridlayout

Below is the source code;

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
class TwoColumnApp(App):
    def build(self):
        my_layout = GridLayout()
        my_layout.cols = 2
        self.my_first_button = Button(text="I'm A Button. Press Me")
        self.my_first_label = Label(text="Please Press My Button")
        my_layout.add_widget(self.my_first_button)
        my_layout.add_widget(self.my_first_label)
        return my_layout
TwoColumnApp().run()

Review

This source code and how it works builds upon the previous examination of kivy.orgs “Hello World” code in Part 3 of this blog series. So lets start by reviewing parts of the code that we already know from that review;

  • Line 1 of the code imports the Kivy’s App class for use in this App. This is Kivy’s underlying code that creates the base GUI and is a requirement for most Kivy applications.
  • Line 5 of the code creates the instance –technically computer scientists call this a subclass– of Kivy’s App class and names the object “TwoColumnApp”.
  • Line 4 of the code imports Kivy’s Button Widget for use in the app.
  • Line 9 of the code creates an instance of Kivy’s Button Widget with the buttons text property set to “I’m A Button. Press Me”.
  • Line 6 references the build method. build is a method of Kivy’s App class and was inherited by the TwoColumnApp object when it was created. build is an object that simply places screen widgets on the GUI when called.
  • Line 6 uses the keyword “self” and simply put it refers to “the current Kivy widget instance”
  • Line 13 starts with the command return. When the program is run, return calls the build method which in turn builds and displays the GUI.
  • Line 14 calls the TwoColumnApp object to run. The Kivy app runs in a continuous loop until terminated.

Hence the code below is commented line by line with what we’ve learned to date;


from kivy.app import App # Imports the base App class required for Kivy Apps
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.button import Button # Imports the Button Screen Widget
class TwoColumnApp(App): # Creates the instance (copy) of the Kivy App class named TwoColumnApp.
    def build(self): # build is a method of Kivy's App class used to place widgets onto the GUI.
        my_layout = GridLayout()
        my_layout.cols = 2
        self.my_first_button = Button(text="I'm A Button. Press Me") # Creates a Button Widget instance and sets its text property to Im A Button. Press Me.
        self.my_first_label = Label(text="Please Press My Button")
        my_layout.add_widget(self.my_first_button)
        my_layout.add_widget(self.my_first_label)
        return my_layout # return calls the build method which in turn builds the GUI.
TwoColumnApp().run() # Calls the TwoColumnApp object to run the app.

The Skinny On The GridLayout Code

The new code that adds the Label and builds the Grid Layout is as follows;

  • Line 3 of the code imports Kivy’s Label Screen Widget class for use in this app. This is done in the exact same manner as Kivy’s Button widget. (Line 4)
    • A label looks exactly like a button and its purpose is to display text only. The Label Widget has no “click” methods that you might expect when using a Button widget.
  • Line 10 of the code creates an instance of Kivy’s Label Widget and names the new label object “self.my_first_label”. Line 10 also assigns its text property  to “Please Press My Button”.This is done in the exact same manner as Kivy’s Button widget. (Line 9)
  • Line 2 of the code imports the GridLayout class for use in the app.
  • Line 7 of the code creates an instance of the GridLayout class and names the new GridLayout object my_layout.
    • From this point on any Screen Widgets added to the GUI will be added to the my_layout object and will be added to the GUI in a grid-like fashion as shown above.
  • Line 8 sets the column property of the my_layout to 2 columns
  • Line 11 adds the self.my_first_button widget to the my_layout object. Because my_layout is set to 2 columns and grid layouts populate from left to right, the button is placed on the left hand side of the screen.
  • Line 12 adds the self.my_first_label widget to the my_layout object. Because my_layout is set to 2 columns and grid layouts populate from left to right, the label is placed on the right hand side of the screen because the button occupies the first column.

Given the additional information on how the grid layout works, the final code for this post is as follows with each line commented to indicate what the code does;


from kivy.app import App # Imports the base App class required for Kivy Apps
from kivy.uix.gridlayout import GridLayout # imports the GridLayout class for use in the app.
from kivy.uix.label import Label # Imports the Label Screen Widget for use in the app.
from kivy.uix.button import Button # Imports the Button Screen Widget for use in the app.
class TwoColumnApp(App): # Creates the instance (copy) of the Kivy App class named TwoColumnApp.
    def build(self): # build is a method of Kivy's App class used to place widgets onto the GUI.
        my_layout = GridLayout() # Creates a GridLayout titled my_layout for use in the app.
        my_layout.cols = 2 # Sets my_layout column property to 2
        self.my_first_button = Button(text="I'm A Button. Press Me") # Creates a Button Widget instance and sets its text property to I'm A Button. Press Me.
        self.my_first_label = Label(text="Please Press My Button") # Creates a Label Widget instance and sets its text property to Please Press My Button.
        my_layout.add_widget(self.my_first_button) # Adds the button widget to my_layout
        my_layout.add_widget(self.my_first_label) # Adds the label widget to My_layout
        return my_layout # return calls the build method which in turn builds the GUI.
TwoColumnApp().run() # Calls the TwoColumnApp object to run the app.

Button vs. Label Widgets

Before concluding and moving on to the next blog post I just wanted to point out the difference the Button and Label widgets. If you mouse-click or touch the button you’ll notice that the button changes colour for an instant (shown below). If you do the same to the label, nothing happens. That is the fundamental difference between a label and a button. A buttons have methods that will eventually trigger an event. Labels are designed to display text only and as such have no direct interactivity.

gui

A Kivy Button Demonstrates Its Interactivity When Touched Or Mouse Clicked By Changing Its Colour For An Instant

What’s Next?

If you haven’t done so yet now would a good time to play around with Kivy’s GridLayout code by adding some widgets, increasing the columns and trying out the grid arrangement in rows instead of columns. In the next blog post you’ll learn how to code the button so, when touched or clicked, it will change the label text to Hello, world!

….brad….

Here is the link to the next post in this blog series: Kivy For The Non Computer Scientist – Part 5: Making A Kivy Button Do Something

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: