Python – Change kivy button size and position 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.

In this article we will see that how can we can change the size and the position of button in kivy python in kv file.

size : This is for static sizing of widgets and takes two arguments i.e. (width, height). Default size of the button = (100, 100).

Syntax: b1 = Button(size=(100, 100))

pos : This is for static placement of widgets and is used to give position to button and by default it is (0, 0) which is the bottom-left corner of the screen.

Syntax : b1 = Button(pos=(100, 100))

size_hint : This is for dynamic sizing of the button and provide hint of size. It contains two arguments i.e. width and height it can be floating values.By default, all widgets have their size_hint=(1, 1).



filter_none

edit
close

play_arrow

link
brightness_4
code

button = Button(
   text='Hello world',
   size_hint=(.5, .25))

chevron_right


pos_hint : This is for dynamic placement of the button and provide hint of position. We can define upto 8 keys i.e. it takes arguments in form of dictionary.

pos_hint = {“x”:1, “y”:1, “left”:1, “right”:1, “center_x”:1, 
                 “center_y”:1, “top”:1, “bottom”:1(“top”:0)}
filter_none

edit
close

play_arrow

link
brightness_4
code

button = Button(text='Hello world', size_hint=(.6, .6),
               pos_hint={'x':.2, 'y':.2})

chevron_right


Basic Approach:

1) import kivy
2) import kivyApp
3) import all neaded(like button and layouts to use them)
4) Set minimum version(optional)
5) create Layout class
6) create App class
7) Set up .kv file : Create the buttons and set up the position and size 
8) return Layout/widget/Class(according to requirement)
9) Run an instance of the class

Kivy Tutorial – Learn Kivy with Examples.

main.py file implementation of the approach –

filter_none

edit
close

play_arrow

link
brightness_4
code

## Sample Python application demonstrating the 
## How to set button size and position 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 
  
# 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 BtnApp(App): 
    # defining build() 
    def build(self): 
        # returning the instance of root class 
        return FloatLayout() 
    
# run the app 
if __name__ == "__main__"
    BtnApp().run() 

chevron_right


btn.kv file implementation of the approach –

filter_none

edit
close

play_arrow

link
brightness_4
code

#.kv file implementation of seting position and size of btn   
<FloatLayout>: 
        
    Button: 
        text: "pos_hint "
        background_color: 0.1, 0.5, 0.6, 1
  
        # Giving size hint i.e size of button is
        # 30 % by hight and width of layout .
        size_hint: 0.3, 0.3
          
        # positioned at 0 % right and 100 % up / top 
        # from bottom left, i.e x, top = 0, 100 from bottom left: 
        pos_hint: {"x":0, "top":1
    
            
    Button: 
        text:"pos"
        background_color: 0.4, 0.5, 0.6, 1
        size_hint: 0.3, 0.3
        pos: 100, 100 
    
    Button: 
        text:"size_hint"
        background_color: 0, 0, 1, 1
  
        # Giving size hint i.e size of button is
        # 40 % by hight and  50 % width of layout .
        size_hint: 0.5, 0.4
        pos_hint: {"x":.4, "top":1
  
                     

chevron_right


Output:




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.



Improved By : nidhi_biet

Article Tags :

Be the First to upvote.


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