Lay Out the User Interface (UI)

00:00 Laying Out the UI. Each GUI framework that you use has its own method of arranging widgets. For example, in wxPython, you would use sizers, whereas in Tkinter, you use a layout or geometry manager.

00:16 With Kivy, you use layouts. There are several different types of layouts that you can use. The most common ones are BoxLayout, FloatLayout, and GridLayout.

00:34 Kivy’s documentation will give you a full list of available layouts. Here, you’ll try out BoxLayout with the code that’s seen on-screen.

00:53 First, you import BoxLayout from kivy.uix.boxlayout. Next, you create some colors, which are lists of RGB and alpha values. These are then added to another list, colors, which becomes a list of lists, allowing easy random selection of these preselected colors.

01:22 You create an instance of BoxLayout and loop over a range of 5, creating a button, btn, for each iteration. With the background color of the button set to a random color,

01:44 you then add the button to the layout. After the loop has ended and five buttons have been added to the BoxLayout, the layout is returned.

02:06 When you run this code, you’ll see something similar to what’s seen on-screen, although your colors will be a random choice. When you create a layout, there are few arguments you should know. padding: You can specify the padding in pixels between the layout and its children in one of three ways: A four-argument list [padding_left, padding_top, padding_right, padding_bottom], a two-argument list [padding_horizontal, padding_vertical], or a single argument of padding.

02:40 spacing allows you to add space between the child widgets, and orientation allows you to change the default orientation of the BoxLayout from horizontal to vertical.

02:51 Like most GUI tool kits, Kivy is mostly event-based. The framework responds to user keypresses, mouse events, and touch events. Kivy has a concept of a clock that you can use to schedule function calls for some time in the future.

03:09 Kivy also has the concept of Properties, which works with the EventDispatcher. Properties help you to do validation checking. They also let you fire events whenever a widget changes its size or position.

03:24 Let’s add a button event to the previous example. First, an .index attribute is added to the Button object. This will be used by the function that you’ll add later.

03:35 Next, you call button.bind(), and this links the on_press event to the MainApp.on_press_button() method, which you’re going to code in a second.

03:44 The method implicitly takes the widget instance, which in this case is the button. Finally, the .on_press_button() method is created.

03:53 This prints out a message to the terminal indicating which button has been pressed by making use of the .index attribute that was added earlier on.

04:06 When you run the program, you’ll see something similar to what’s seen on-screen.

04:23 In the next part of the course, you’ll take a look at using the KV language to create your layouts.