Python | AnchorLayout in Kivy using .kv file

Kivy — it is a platform independent GUI tool in Python. Since it can run on Android, IOS, Linux, Windows, etc. It is mainly used to develop Android application, but that does not mean that it cannot be used in desktop applications.

AnchorLayout:

elements border (top, bottom, left, right) or center. The class below is used to implement the anchor scheme.

 kivy.uix.anchorlayout.AnchorLayout 

AnchorLayout can be initialized with parameters:

  anchor_x  Parameters can be passed:  “left” ,  “right”  and  “center” .  anchor_y  Parameters can be passed:  “top” ,  “bottom”  and  “center” . 

Select where the widgets are placed in the parent container.

There are 9 different layout regions where the Anchorlayout can be placed for effect:

Top -left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center and bottom-right.

  Basic Approach:  1) import kivy 2) import kivyApp 3) import gridlayout (not necessary according to requirement) 4) import Anchorlayout 5) Set minimum version (optional) 6) create Layout class 7) create App class 8) Set up .kv file 9) Return the instance of layout class 10) Run an instance of the Appclass 

In the code example below, we have used GridLayout as the root class of the widget. buttons .

Implementation of the approach:

main.py file —

# Sample Python application demonstrating
# AnchorLayout working in Kivy using a .kv file

 
################################ ################### #

 
# Your application base class inherits from the application class.
# app: always refers to your application instance

from kivy.app import App

 
# GridLayout arranges children in a matrix.
# It takes up available space and
# divides it into columns and rows ,
# then adds widgets to the resulting "cells".

from kivy.uix.gridlayout import GridLayout

 
# change the default KIVY settings
# we use this config module

from kivy.config import Config

 
# 0 disabled 1 included as true / false
# You can use 0 or 1 & amp; & amp; True or False

Config. set ( `graphics` , ` resizable` , True )

 

  
# create the root widget used in the .kv file

class Anchor_Layout (GridLayout):

pass

 
# class where the name of the .kv file should be named Anchor_Layout.kv

class Anchor_LayoutApp (App):

def build ( self ):

# return an instance of the root class

return Anchor_Layout ()

 
# launch application

if __ name__ = = `__main__` :

Anchor_LayoutApp (). run ()

.kv file —

# Anchor layout .kv file implementation

 
##################### ###########################

  

 
# creating Button capabilities
& lt; MyButton @ Button & gt ;:

  size_hint: [ None , None ]

size: [ 100 , 100 ]

  
# create root .kv
& lt; Anchor_Layout & gt ;:

 

# Assigning grids

rows: 3

 

# Anchor Layout 1

  AnchorLayout:

 

# anchor schema position

anchor_x: `left`

  anchor_y: ` top`

 

# create canvas

canvas:

  Color:

rgb: [. 5 ,. 324 ,. 384 ]

Rectangle:

pos: self . pos

size: self . size

 

# create a button

MyButton:

text: `B1`

  

  # Anchor Layout 2

AnchorLayout:

anchor_x: `center`

anchor_y: `top`

canvas:

Color:

  rgb: [. 5 ,. 692 ,. 498 ]

Rectangle:

pos: self . pos

size: self . size

MyButton:

text: `B2`

 

# Anchor Layout 3

AnchorLayout:

  anchor_x: ` right`

anchor_y: ` top`

ca nvas:

Color:

rgb: [. 5 ,. 692 , 1 ]

Rectangle:

pos: self . pos

size: self . size

MyButton:

text: `B3`

 

  # Anchor Layout 4

AnchorLayout:

anchor_x: `left`

anchor_y: `center`

canvas:

Color:

rgb: [. 789 ,. 5 ,. 699 ]

  Rectangle:

pos: self . pos

  size: self . size

MyButton:

text: `B4`

 

# Anchor Layout 5

AnchorLayout:

anchor_x: `center`

anchor_y: `center`

canvas:

Color:

  rgb: [. 333 ,. 5 ,. 673 ]

Rectangle:

  pos: self . pos

size: self . size

MyButton:

text: `B5`

 

# Anchor layout 6

AnchorLayout:

  anchor_x: `right`

  anchor_y: `center`

  canvas:

Color:

rgb: [. 180 ,. 5 ,. 310 ]

Rectangle:

pos: self . pos

  size: self . size

  MyButton:

text: `B6 `

  

  # Anchor Layout 7

  AnchorLayout:

anchor_x: `left`

anchor_y: `bottom`

canvas:

Color:

rgb: [. 180 ,. 398 ,. 5 ]

  Rectangle:

pos: self . pos

size: self . size

MyButton:

text: `B7`

 

# Anchor Layout 8

AnchorLayout:

anchor_x: `center`

  anchor_y: `bottom`

  canvas:

Color:

rgb: [. 438 ,. 329 ,. 5 ]

Rectangle:

pos: self . pos

size: self .size

  MyButton:

text: `B8`

  

  # Anchor Layout 9

AnchorLayout:

anchor_x: `right`

anchor_y: `bottom`

canvas:

  Color:

rgb: [ . 611 ,. 021 ,. 5 ]

  Rectangle:

pos: self . pos

size: self . size

MyButton:

text: `B9`  

Output: