Before doing anything in Kivy it is important to understand what Layouts and Widgets are and how to work with them.
What is a widget?
Widget is any visual object which you can create with Kivy. For example Button, Label, TextInput...
You can place the widget anywhere in the Layout.
We have 8 most used Layouts:
- Anchor Layout
- BoxLayout
- RelativeLayout
- FloatLayout
- GridLayout
- PageLayout
- ScatterLayout
- StackLayout
Anchor Layout
You can place your widgets to some kind of 3×3 table. You can use:
- 'top' - the highest point of the table
- 'bottom' - the lowest point of the table
- 'left' - left of the table
- 'right' - right of the table
- 'center' - center of the table
BoxLayout
Objects here take their place automatically. You can choose orientation:
- 'horizontal'
- 'vertical'
This layout adjusts the size of the widgets which you can set later.
FloatLayout
You have to set the absolute position of your widgets by typing:
- in .kv - pos: width, height
- in .py - pos = (width, height)
The default position is in the left bottom corner, the width and height arguments are pixel values.
RelativeLayout
It is similar to FloatLayout, but the position is set according to relative position of the layout which contains it not the position of the window.
GridLayout
You can place widgets into a grid. The size of grid can be set with these two commands:
- col_default_width: (or cols_minimum: )
- row_default_height: (or rows_minimum: )
PageLayout
Layout which has more than one page. Looks like book reader. It is most usable on mobile devices.
ScatterLayout
Relatively similar to RelativeLayout. You can freely translate, rotate, scale etc. the objects in it using clicks.
StackLayout
Fairly similar to BoxLayout. You can choose the way it sorts its content:
- lr-tb - from left to right, then from top to bottom
- tb-lr - from top to bottom, then from left to right
- etc.
Then, there are three mostly used widgets:
Button
It is simply a button. The standard settings create a grey button with white text.
There are some useful attributes:
- pos: (position of the button in FloatLayout or RelativeLayout in pixels from left bottom corner)
- pos_hint: (a float numbers; position might seem like 0.5, 0.5 which means the object is in the middle of the screen)
- size: (size in pixels)
- size_hint: (size according to screen size; looks like 'x': 0.5, 'y': 0.5)
- background_color: (color in rgba; (1, 0, 0, 1) stands for red)
- text_color: (color of buttons text in rgba)
- font_size: (size of text in the button)
- on_press: (here you place a function which you have created in the .py file and which should be done when you press the button)
- on_release: (same as on_press, but on release)
- background_normal: (an image - background of the button when it is not pressed)
- background_down: (an image - displays when the button is pressed)
Label
Label is a text in the app. It can have background. Or not. You can set everything:
- pos: (same as button)
- pos_hint: (same as button)
- size: (same as button)
- size_hint: (...)
- text_color: (...)
- font_size: (...)
- color: (color of label's background)
- font_name: (name of the font you selected)
TextInput
It is a place where you can place your text. But, what can you do with it:
- pos: (...)
- pos_hint: (...)
- size: (...)
- size_hint: (...)
- font_size: (...)
- color: (changes the text color in rgba)
- foreground_color: (changes the TextInput's color in rgba)
And that's all today. I hope you enjoyed reading. In the next article, I will show you canvas.
You can support my work there (TRC-20):
TRTrony1AmK3233VXTENcXSFem7sLRu2am
Or there (ERC-20):
0x026678e4c9586d207bd7e3907378cc28e8608a1c
Thanks for any support!