Python | FloatLayout in Kivy using .kv file
Kivy is a platform independent GUI tool in Python. As it can be run on Android, IOS, linux and Windows etc. It is basically used to develop the Android application, but it does not mean that it can not be used on Desktops applications.
👉🏽 Kivy Tutorial – Learn Kivy with Examples.
FloatLayout:
Floatlayout
provides us the flexibility to arrange the elements like button relatively i.e it allows us to place the elements using something called relative position. This means rather than defining the specific position or the coordinates we will place everything using the percentage w.r.t the size of window i.e we can dynamically arrange the position of the elements.
The first thing we need to do import FloatLayout –
from kivy.uix.floatlayout import FloatLayout
We have 2 properties to create the dynamic placement –
1) pos_hint: provide hint of position
We can define upto 6 keys i.e. 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 i.e. width and height
Note:
- You can only use values between 0-1 for both size_hint and pos_hint. Where 0 = 0% and 1 = 100%.
- The coordinate system in kivy works from the bottom left! This will be important when placing our objects. (i.e (0, 0) is the bottom left).
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 approach –
main.py file
import kivy
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.config import Config
Config. set ( 'graphics' , 'resizable' , True )
class FloatLayout(FloatLayout):
pass
class Float_LayoutApp(App):
def build( self ):
return FloatLayout()
if __name__ = = "__main__" :
Float_LayoutApp().run()
|
This file includes the dynamic placements of button i.e as the screen size changes the button adjust themselves relatively this is the benefit of the FloatLayout.
.kv file implementation of approach –
<Button>:
font_size: 40
size_hint: 0.3 , 0.3
<FloatLayout>:
Button:
text: "Helooo !!!!! "
background_color: 0.1 , 0.5 , 0.6 , 1
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:)"
background_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:
Reference:
https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html
https://techwithtim.net/tutorials/kivy-tutorial/floatlayout/
Last Updated :
07 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...