In this kivy tutorial I will go over how to create buttons and trigger events when those buttons are clicked. I will also talk about creating multiple grid layouts to better display our widgets.
The first thing we need to do is import Button from kivy.uix.button.
Creating a Button
Creating a button can be done in a similar way to creating a text input box. To do so we simply declare a variable to hold our button and then add that to the grid layout.
self.submit=Button(text="Submit",font_size=40)self.add_widget(self.submit)# Adding this inside the __init__ of the class will create a button for us
Now when we run the program we should see a button appearing in our GUI.
However, notice that the button is not centered in our window! This is not ideal and we must do something to fix this.
The reason why our button is not centered is because we are using one grid layout that has 2 rows. This means when we add a button it is slotted in the first column of the forth row. A clever way of fixing this is by creating multiple grid layouts.
We can add all of the labels and text input boxes into a layout with two columns and then add that layout into another layout that only contains one column. We would also add our button into the layout with only one column so that it spans the entire bottom of the screen. Essentially we are going to be using two grid layouts and placing one inside of the other.
To do this we need to create another grid layout inside of our class and call it inside and add the appropriate widgets to it.
classMyGrid(GridLayout):def__init__(self,**kwargs):super(MyGrid,self).__init__(**kwargs)self.cols=1# Set columns for main layoutself.inside=GridLayout()# Create a new grid layoutself.inside.cols=2# set columns for the new grid layout# ALL OF THESE ARE APART OF THE (INTERIOR)NEW LAYOUTself.inside.add_widget(Label(text="First Name: "))self.name=TextInput(multiline=False)self.inside.add_widget(self.name)self.inside.add_widget(Label(text="Last Name: "))self.lastName=TextInput(multiline=False)self.inside.add_widget(self.lastName)self.inside.add_widget(Label(text="Email: "))self.email=TextInput(multiline=False)self.inside.add_widget(self.email)#-------------------------------------------------self.add_widget(self.inside)# Add the interior layout to the mainself.submit=Button(text="Submit",font_size=40)self.add_widget(self.submit)# Add the button to the main layout
Now when we run the program our button is centered nicely!
Binding Button Functions
Now that we have our button added we need to add some functionality to it. In my case when the button is clicked I'd like to collect all of the information from the form and print it to the console. I'd also like to clear the form so that it can be used again.
To accomplish this we need to do something called binding. We are going to bind a button to a function/method that we create so that when that button is clicked the function will run. To bind a button we use the following:
self.submit.bind(on_press=self.pressed)# pressed is the name of the method we want to run# submit is clearly the name of our button
Now since we've bind our button to the method pressed we need to create that method.
Inside of our class we will create the method pressed that contains one parameter. It is important that you include this. To get the value of each of the text inputs in our form we can simply access the attribute .text. Similarly to change the text.
# This goes inside our class MyGriddefpressed(self,instance):# Get the value of all of the tex inputsname=self.name.textlast=self.lastName.textemail=self.email.text# print the values to the screenprint("Name:",name,"Last Name:",last,"Email:",email)# Reset text to blank in each text inputself.name.text=""self.lastName.text=""self.email.text=""
If we run the program and click the button we should see that the text inputs get cleared and our input gets printed to the console.