Kivy - Layouts in Layouts

---

---

A Layout in Kivy is a container widget. It provides an effective mechanism to construct a GUI having different widgets. Kivy library includes different Layout widgets such as GridLayout, BoxLayout, AnchorLayout, etc.

A layout itself is a subclass of Widget class. Hence, we can strategically place one or more layouts inside a layout. In this way, a hierarchy of widget structure can be constructed to design an effective GUI for the app. Any Layout can be enclosed in any other layout. It all depends upon how the app design is envisaged by the developer.

Let us plan our app interface layout as per the following schematic figure −

Here, we need an uppermost one-column grid layout. Inside it, we want to put a TextInput and two more horizontal box layouts.

The first box contains three buttons. The one below it has an Image control and an AnchorLayout widget that has a slider control in it.

Example

The following "kv" language script uses this planned structure −

GridLayout:
   cols: 1
   size: root.width, root.height
   TextInput:
      text: "Hello World!"
      font_size: 32
      size_hint: (1, .2)
   BoxLayout:
      orientation:'horizontal'
      size_hint: (1, .2)
      Button:
         text:"Btn 1"
         font_size:32
      Button:
         text:"Btn 2"
         font_size:32
      Button:
         text:"Btn 3"
         font_size:32
   FloatLayout:
      Image:
         source: "kivy-logo.png.png"
         size_hint: .5, .75
         pos_hint: {"center_x": 0.25}
      AnchorLayout:
         anchor_x : 'center'
         anchor_y : 'top'
         size_hint: .5, .75
         pos_hint: {"center_x": 0.75}
         Slider:
            min:0
            max:100
            value:25

You can load this "kv" script in the following App class −

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.animation import Animation
from kivy.core.window import Window

Window.size = (720,400)

class MyLayoutApp(App):
   def build(self):
      pass
      
if __name__ == '__main__':
   MyLayoutApp().run()

Output

When you run this code, it will produce the following output window −

The final appearance of the app window is similar to the initial plan, which uses "layouts in a layout".