Kivy Layouts
Kivy Layouts:
The most crucial concept in graphic design is the layout. It is applied to organize components for a better appearance.
The following are the several layout types that are typically used in the Kivy.
BoxLayout:
The orientation can be adjusted to either "horizontal" or "vertical." In the same sequence that they are placed in the layout, the widgets will be added to the box. Here is an example of how to set up two buttons horizontally using BoxLayout:
from kivy.app import App from kivy.uix.boxlayout import BoxLayout from kivy.uix.button import Button class MyBoxLayout(BoxLayout): def __init__(self, **kwargs): super(MyBoxLayout, self).__init__(**kwargs) self.orientation = 'horizontal' self.add_widget(Button(text='Button 1')) self.add_widget(Button(text='Button 2')) class MyApp(App): def build(self): return MyBoxLayout() if __name__ == '__main__': MyApp().run()
GridLayout:
The widgets are arranged in a grid structure with rows and columns using a grid layout. The widgets will be added to the grid in the order they are added to the layout, and you can define the number of rows and columns. In order to organize four buttons in a 2x2 grid using GridLayout, see the following example:
from kivy.app import App from kivy.uix.gridlayout import GridLayout from kivy.uix.button import Button class MyGridLayout(GridLayout): def __init__(self, **kwargs): super(MyGridLayout, self).__init__(**kwargs) self.cols = 2 self.add_widget(Button(text='Button 1')) self.add_widget(Button(text='Button 2')) self.add_widget(Button(text='Button 3')) self.add_widget(Button(text='Button 4')) class MyApp(App): def build(self): return MyGridLayout() if __name__ == '__main__': MyApp().run()
FloatLayout:
FloatLayout positions the widgets relative to the layout's coordinate system. We can specify the widget's position using x and y coordinates. Here is an example of how to use FloatLayout to position a button in the center of the layout:
from kivy.app import App from kivy.uix.floatlayout import FloatLayout from kivy.uix.button import Button class MyFloatLayout(FloatLayout): def __init__(self, **kwargs): super(MyFloatLayout, self).__init__(**kwargs) self.add_widget(Button(text='Centered Button', pos_hint={'x': 0.4, 'y': 0.4})) class MyApp(App): def build(self): return MyFloatLayout() if __name__ == '__main__': MyApp().run()
StackLayout:
A StackLayout is a layout class that arranges the widgets in a Z-axis stack. It arranges the widgets vertically or horizontally, one after the other.
Here is an example of how to stack three buttons vertically using StackLayout:
from kivy.app import App from kivy.uix.stacklayout import StackLayout from kivy.uix.button import Button class MyStackLayout(StackLayout): def __init__(self, **kwargs): super(MyStackLayout, self).__init__(**kwargs) self.orientation = 'tb' # 'tb' stands for top to bottom orientation self.add_widget(Button(text='Button 1')) self.add_widget(Button(text='Button 2')) self.add_widget(Button(text='Button 3')) class MyApp(App): def build(self): return MyStackLayout() if __name__ == '__main__': MyApp().run()
In this example, we created a StackLayout and vertically added three buttons to it. We chose the top-to-bottom stacking orientation, or "tb." The orientation can also be adjusted to "lr" for left-to-right stacking.
Here's an example of using StackLayout to stack 10 buttons vertically:
from kivy.app import App from kivy.uix.stacklayout import StackLayout from kivy.uix.button import Button class MyStackLayout(StackLayout): def __init__(self, **kwargs): super(MyStackLayout, self).__init__(**kwargs) self.orientation = 'tb' for i in range(10): self.add_widget(Button(text=f'Button {i+1}')) class MyApp(App): def build(self): return MyStackLayout() if __name__ == '__main__': MyApp().run()
In this example, a StackLayout was created, then ten buttons were added to it vertically using a for loop. Each button's text is set to "Button I "where i is the loop's button's index. The text inside the buttons determines their size.
AnchorLayout:
The widgets are positioned according to the anchor points using the layout class called AnchorLayout. The widget's placement on the screen is determined by the anchor points.
Here's an example of how to position a button in the centre of the screen using AnchorLayout:
from kivy.app import App from kivy.uix.anchorlayout import AnchorLayout from kivy.uix.button import Button class MyAnchorLayout(AnchorLayout): def __init__(self, **kwargs): super(MyAnchorLayout, self).__init__(**kwargs) self.add_widget(Button(text='Centered Button', size_hint=(None, None), size=(200, 100), anchor_x='center', anchor_y='center')) class MyApp(App): def build(self): return MyAnchorLayout() if __name__ == '__main__': MyApp().run()
In this example, we developed an AnchorLayout and personalized it with a button. The button will be centred on the screen because the size of the button is set to (200, 100) and the anchor points are set to "centre." To guarantee that the button's size is fixed and unaffected by the layout, size hint is set to (None, None).