Python | Location of floats in Kivah

Michael Zippo

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 allows us to position elements relative to the current size and height of the window, especially on mobile, i.e. Floatlayout allows us to position elements using what is called relative position. This mean s that instead of defining a specific position or coordinates, we will position everything using a percentage relative to the size of the window. When we resize the window, whatever is placed in the window will adjust its size and position accordingly. This makes the application more robust and scalable to window size.

Note: FloatLayout respects the pos_hint and size_hint properties their children.

The first thing we need to do to use FloatLayout is to import it.

 from kivy.uix.floatlayout import FloatLayout

  Basic Approach:  1) import kivy 2) import kivyApp 3) import button 4) import Floatlayout 5) Set minimum version (optional) 6) create App class 7) return Layout / widget / Class ( according to requirement) 8) Run an instance of the class

For example, a FloatLayout is created with the size (300, 300):

 layout = FloatLayout (size = (300, 300))

By default, all widgets have their own size_hint = (1, 1) , so this button below will have the same size as the layout:

 button = Button (text = ’Hello world’) layout.add_widget (button)

To create a button with a specific width and height ma chum located in a specific position, you can do it as shown below:

Implementation of the approach:

       # Sample Python application demonstrating  
  # FloatLayout in Kiwi  
   
   import   kivy 
    
  # Your application base class inherits from the application class.  
  # app: always references an instance your application  
   from   kivy.app   import   App 
   
  # creates a button in kiw  
 < code class = "comments"> # if not imported shows an error  
   from   kivy.uix.button   import   Button 
   
  # 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  
   from   kivy.config   import   Config  
   
  # 0 disabled 1 enabled as true / false  
  # You can use 0 or 1 & amp; & amp; True or False  
   Config.   set   (   ’graphics’  ,  ’ resizable’  ,   True  ) 
   
  # create application class  
   class   MyApp (App): 
   
    def   build (  self  ): 
   
    # creating Floatlayout  
    Fl   =   FloatLayout () 
    
     # button create  
    # button 30% width and 20 %  
    # layout heights and  
    # located at (300, 200), you can do:  
    btn   =   Button (text   =   ’Hello world’  , 
    size_hint   =   (.   3  ,.   2  ),  
     pos   =   (  300  ,   200  ))  
   
    # add a widget i.e. button  
    Fl.add_widget (btn) 
   
    # return layout  
    return   Fl  
   
  # launch application  
   if   __ name__   =   =   "__main__"  : 
    MyApp ( ) .run ()

Exit:

Note: now if you resize the window it will resize too their position regarding the size. This layout can be used for the application. Most of the time you will be using window size.

Dynamic Placements —
Now something is missing, or the above code is not perfect, which you can to tell. We still need to add button placement.

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).

Code to implement dynamic positioning:

# Sample Python application demonstrating
# how dynamic layout works in a FloatLayout in Qiwi

import kivy

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

from kivy.app import App

# creates a button in kiw < / code> # if not imported shows an error

   from   kivy.uix.button   import   Button 
    
  # 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  
   from   kivy.config   import   Config 
   
  # 0 disabled 1 enabled as true / false  
  # You can use 0 or 1 & amp; & amp; True or False  
   Config.   set   (   ’graphics’  ,  ’ resizable’  ,   True  ) 
   
  # create application class  
   class   MyApp (App): 
   
    def   build (  self  ): 
   
    # creating Floatlayout  
    Fl   =   FloatLayout () 
    
     # button create  
    # button 30% width and 50 %  
    # layout heights and  
    # positioned 20% to the right and 20% up  
    # bottom left, that is, x, y = 200, 200 bottom left:  
    btn   =   Button (text   =   ’Hello world’  , size_hint   =   (.   3  ,.   5  ), 
     background_color   =   (.   3  ,.   6  ,.   7  ,   1  ), 
    pos_hint   =   {  ’x’   :.   2  ,   ’y’   :.   2  }) 
    
     # add a widget i.e. button  
    Fl.add_widget (btn) 
   
    # return layout  
    return   Fl  
   
  # launch application  
   if   __ name__   =   =   "__main__"  : 
    MyApp ( ) .run ()