Python | FloatLayout 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.

FloatLayout:

Floatlayout gives us the flexibility to arrange elements like buttons are relative, that is, it allows us to position elements using what is called relative position. This means that instead of defining a specific position or coordinates, we will position everything using a percentage relative to the size of the window, i.e. we can dynamically arrange the position of the elements.

The first thing we need to do is import FloatLayout —

 from kivy.uix.floatlayout import FloatLayout 

we have 2 properties to create dynamic placement —

1) pos_hint: provide hint of position
We can define upto 6 keys ie it takes arguments in form of dictionary.
pos_hint = {“x”: 1, “y”: 1, “left”: 1, “right”: 1, “top”: 1, “bottom”: 1}

2) size_hint: provide hint of size
Contains two arguments ie width and height

Notes :

  • You can only use values ​​between 0 and 1 for size_hint and pos_hint. Where 0 = 0% and 1 = 100%.
  • The qiwi coordinate system works at the bottom left! This will be important when placing our objects. (i.e. (0, 0) is the bottom left corner).
  Basic Approach:  1) import kivy 2) import kivyApp 3) import Floatlayout 4 ) Set minimum version (optional) 5) create Layout class 6) create App class 7) Set up .kv file 8) return Layout / widget / Class (according to requirement) 9) Run an instance of the class 

Implementation of the —

main.py file

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

 
########################### ####################### #
# import modules

 

import kivy

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

from kivy.app import App

 
# the module consists of floatlayout
# work with FloatLayout first
# you must import it

from kivy.uix.floatlayout import FloatLayout

 
# To change the default KIVY settings
# we use this config module < / code>

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 FloatLayout (FloatLayout):

pass

 
# create an application class named
The # .kv file must be named Float_Layout.kv

class Float_LayoutApp (App):

  # build () definition

  def build ( self ):

# return an instance of the root class

return FloatLayout ()

  
# run the application

if __ name__ = = "__ main__" :

Float_LayoutApp (). run ()

This file includes dynamic button placement, i.e. As the screen resizes, the button adjusts itself to this advantage of FloatLayout.

# .kv implementation of the FloatLayout file

 
# create a button
& lt; Button & gt ;:

font_size: 40

 

# create button

# 30% width and 50% button

# layout heights

  size_hint: 0.3 , 0.3

 
& lt; FloatLayout & gt ;:

 

Button:

text: " Helooo !!!!! "

  background_color: 0.1 , 0.5 , 0.6 , 1

 

# positioned 0% right and 100% up / up

# bottom left, ie x, top = 0, 100 bottom left:

pos_hint: { "x" : 0 , " top " : 1 }

 

  Button:

  text : "Rajnish :)"

background_color: 1 , 0 , 0 , 1

pos_hint: { "x" : 0.35 , "y" : 0.3 }

 

 

Button:

text: "Ravi :)"

background_color: 0.4 , 0.5 , 0.6 , 1

pos_hint: { "x " :. 7 , " bottom " : 0 }

 

Button:

text: "Sanjeev :)"

backgr ound_color: 0 , 0 , 1 , 1

pos_hint: { "x" :. 7 , "top" : 1 }

 

Button:

text: "Suraj :)"

background_color: 0.8 , 0.9 , 0.2 , 1

pos_hint: { " x " : 0 , "bottom" : 1 }

Output:

Video output:

Link:
https: //kivy.org/doc/stable/api-kivy.uix.floatlayout.html
https://techwithtim.net/tutorials/kivy-tutorial/floatlayout/