Size and Position of a Button

Introduction

In this blog, We will discuss how we could change the size and position of a button in Kivy. Kivy is a platform-independent Graphical user interface tool in python that can run on android, ios, Linux, windows etc. Kivy is not only used for building the android application but also helps in the development of the desktop application.

Down the article, we will see how to change the size and position of a button in Kivy. To do that, we have set up four properties. Out of these 4, two are for static placement and two for dynamic placement. Before going ahead, we should first know about these four properties.

• size: It takes two arguments: width and height of the button. We use the size property as follows:-
   

Button1 = Button(size = (150,150))
Button2 = Button(size = (50,50))

• pos: It stands for the position. pos helps us to position the widget in kivy. By default values are set (0,0) for pos.The bottom left corner of the screen is the default position for the button in kivy. We could use the pos property as follow:-
   

Button1 = Button(pos = (150,150))
Button2 = Button(pos = (50,50))

• size_hint: It provides a hint for the size. It needs two-argument width and height. It can be floating values.Size_hint contain the percentage value, i.e., and it can range from 0-1.Where 0 equals 0% and 1 equals 100%.By default, values for size_hint of the widget are (1,1). We use the size_hint property as below.
   

Button1 = Button(
    text = "Button 01",
	pos = (150,150),
	size_hint = (.75,.5)
)

• pos_hint: It provides a hint for the position of the widget. It takes arguments in form of a dictionary and we could define up to 8 keys. Just like size_hint, it takes value in the range 0-1.Where 0 equals 0% and 1 equals 100%.We use the pos_hint property as follows 
   

Button1 = Button(
    text = "Button 02",
    pos_hint = {“x”:1,“y”:1,“left”:1,“right”:1}
    size_hint = (.75,.5)
)

To change the Size and Position of a Button.

As we have already discussed in the above section, to change the size and position of a button in kivy, we use four properties: size, pos,size_hint, and post_hint.In the below code, we would use each of these properties and create three buttons to show how all these four properties work.

Code:-

# To change the size and position of a button
# Base Class of App need to inherit from the APP class
from kivy.app import App

# Import Button to create a button in kivy. It gives an error if not 
# imported
from kivy.uix.button import Button

# This layout helps us set the child's relative coordinates 
from kivy.uix.relativelayout import RelativeLayout

# Box Layout helps us arrange widgets in a particular fashion 
# that vertical fashion or horizontal fashion 
from kivy.uix.boxlayout import BoxLayout

# Import config helps us change the default setting of kivy
from kivy.config import Config
Config.set('graphics', 'resizable', True)

# Creating App class CodingNinja
class CodingNinja(App):

   # define build function
   def build(self):
   		
   		
   	   # Help us to create a relative layout of size (300,300)
       relative1 = RelativeLayout(size =(300,300))
       Button1 = Button(size_hint=(.2, .2),pos_hint={'center_x': .1, 'center_y': .8},text="Hint for the Position")

       # creating the button
       # size of the button is 20 % by height and 50 % width of layout
       Button2 = Button(size_hint=(.5, .2),text="Hint for Size")

       # creating the button
       # size of button the is 20 % by height and width of layout
       # position is 200, 200 from bottom left
       Button3 = Button(size_hint=(.2, .2),pos=(200, 200),text="Position")

       # adding button to widget
       relative1.add_widget(Button1)
       relative1.add_widget(Button2)
       relative1.add_widget(Button3)

       # returning widget
       return relative1

# Define main
if __name__=="__main__":
  
   # Run app
   CodingNinja().run()

You can also try this code with Online Python Compiler

Run Code

Output:-