Anchor Layout using .kv File

Introduction

Kivy is an independent GUI tool in Python that can be used to create Android, IOS, Linux, and Windows applications. Kivy provides the functionality to write the code for once and run it on different platforms. Though, most applications built on kivy are Android applications we can use it for desktop applications as well.

Anchor Layout basically defines a layout by where it is in regard to the border of the parent. Thus mostly it is either with either of the borders or with neither border making a total of 3 options for each axis and is great when we don't need to make a separate layout for each element.

Therefore, in this blog, we will learn how we can implement Anchor Layout using a .kv file.

Creating Anchor Layout

The anchor layout is implemented using the kivy.uix.anchorlayout.AnchorLayout class. AnchorLayout can be initialized with the parameters anchor_x and anchor_y.

The parameters take the following values:

• anchor_x: “left”, “right”, and “center”. Default value being “center”
• anchor_y: “top”, “bottom”, and “center”. Default value being “center”

There are two other parameters in the Anchor Layout Class as well:

• do_layout(*largs): this function is used when the layout is called by trigger and can be used to schedule the children in the next frame. 
• padding: This defines the padding between the widget and the children in pixels and can be represented in 3 ways: 
  [padding_left, padding_top, padding_right, padding_bottom], 
  [padding_horizontal, padding_vertical] and 
  [padding]. 
  The default value of this property is [0, 0, 0, 0].

As there are 9 different layouts taking all possible combinations we will show all the 9 layouts now. We will show all the combinations using the grid layout for a 3X3 grid.

Example

In the below example, we first make a GridLayout root widget class which will be the parent of 9 AnchorLayouts and the 9 different anchoring positions with the help of buttons.

anclayout.py

import kivy 

from kivy.app import App 
 
#first we import all the necessary dependencies here we will need the grid layout for the overall layout, the config to set graphics as resizable

from kivy.uix.gridlayout import GridLayout
  
from kivy.config import Config 

Config.set('graphics', 'resizable', True) 
  
#we create the outer parent element of the layout. We need no content here as we will do it in the .kv file
class AncLayout(GridLayout): 
    pass
  
#we create a function that will fetch the respective .kv file and is run.
class AncLayoutApp(App): 
    # defining build() 
    def build(self): 
        # returning the instance of root class 
        return AncLayout() 
  
# run the app 
if __name__ == "__main__": 
    AncLayoutApp().run() 

AncLayout.kv

In the kv file first, we will define the button we are going to use. Next, we need to create the 9 boxes that are played in an anchor layout in all the combinations. So the overall widget is a 3X3 grid which has anchor layout of children elements within them with different colors.

<Button>:
        font_size: 15
        size_hint: 0.25, 0.25
  
<AncLayout>:

        rows: 3  
 
    # Top-Left Anchor 
    AnchorLayout:
          
        # position of Anchor Layout 
        anchor_x: 'left'
        anchor_y: 'top'
  
        # creating Canvas 
        canvas:
            Color:
                rgb: [0, 0, 0]
  
        # creating Button
        Button:
            text: 'Hello1'
  
    # Top-Center Anchor
    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'top'
        canvas:
            Color:
                rgb: [0, 0, 1]

        Button:
            text: 'Hello2'
  
    # Top-Right Anchor
    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'top'
        canvas:
            Color:
                rgb: [0, 1, 0]

        Button:
            text: 'Hello3'
  
    # Center-Left Anchor
    AnchorLayout:
        anchor_x: 'left'
        anchor_y: 'center'
        canvas:
            Color:
                rgb: [0, 1, 1]

        Button:
            text: 'Hello4'
  
    # Center-Center Anchor
    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        canvas:
            Color:
                rgb: [1, 0, 0]

        Button:
            text: 'Hello5'
              
    # Center-Right Anchor
    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'center'
        canvas:
            Color:
                rgb: [1, 0, 1]

        Button:
            text: 'Hello6'
  
    # Bottom-Left Anchor
    AnchorLayout:
        anchor_x: 'left'
        anchor_y: 'bottom'
        canvas:
            Color:
                rgb: [1, 1, 0]

        Button:
            text: 'Hello7'
  
    # Bottom-Center Anchor
    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'bottom'
        canvas:
            Color:
                rgb: [1, 1, 1]
  
        Button:
            text: 'Hello8'
  
    # Bottom-Right Anchor
    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'bottom'
        canvas:
            Color:
                rgb: [1, 1, .5]

        Button:
            text: 'Hello9' 

Output