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:
|
Exit:
Video output:
Link:
https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html
https://techwithtim.net/tutorials/kivy-tutorial/floatlayout/