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.

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 Approch:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

## Sample Python application demonstrating the
## working of FloatLayout in Kivy using .kv file
  
###################################################
# import modules
  
import kivy
  
# base Class of your App inherits from the App class.  
# app:always refers to the instance of your application 
from kivy.app import App
  
# module consist the floatlayout
# to work with FloatLayout first
# you have to import it
from kivy.uix.floatlayout import FloatLayout
  
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
     
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True)
  
  
# creating the root widget used in .kv file 
class FloatLayout(FloatLayout):
    pass
  
# creating the App class in which name
#.kv file is to be named Float_Layout.kv
class Float_LayoutApp(App):
    # defining build()
    def build(self):
        # returning the instance of root class
        return FloatLayout()
  
# run the app
if __name__ == "__main__":
    Float_LayoutApp().run()

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

#.kv file implementation of FloatLayout
  
# creating button feature
<Button>:
    font_size: 40
      
    # creating button
    # a button 30 % of the width and 50 %
    # of the height of the layout 
    size_hint: 0.3, 0.3
  
<FloatLayout>:
      
    Button:
        text: "Helooo !!!!! "
        background_color: 0.1, 0.5, 0.6, 1
  
        # positioned at 0 % right and 100 % up / top
        # from botton left, i.e x, top = 0, 100 from 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:)"
        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}

chevron_right


Output:

Video Output:


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



My Personal Notes arrow_drop_up

Competative Programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.