Make Mobile App using Python Part2

Hi Pythonistas!

This is part2 of the series “Make mobile App using Python”. If you are new here please checkout the part1 of the post which is Introduction to Kivy. Today we will learn how to handle events, how to use forms and give use prompt in Kivy. Let us dive into the code

Add Form in Layout

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput


class MyApp(App):

    def build(self):
        layout = BoxLayout(orientation='vertical', spacing=10, padding=40)
        self.name_input = TextInput(hint_text="Name")
        self.age_input = TextInput(hint_text="Age")
        self.email_input = TextInput(hint_text="Email")
        submit_button = Button(text="Submit")

        layout.add_widget(self.name_input)
        layout.add_widget(self.age_input)
        layout.add_widget(self.email_input)
        layout.add_widget(submit_button)
        return layout

if __name__ == '__main__':
    MyApp().run()

BoxLayout is used to arrange items either vertically or horizontal. You can also set properties like spacing and padding to control the spacing between child widgets and the padding around the layout. Here we are using vertical layout as the root layout with spacing 10dp and padding 40dp. 

Then we are adding 3 Textinput for getting inputs from user. Finally a Button for submitting the request. add_widget is used to add UI components to the layout.

Output

Defining submit function

from kivy.uix.popup import Popup

def submit_form(self, instance):
     name = self.name_input.text
     age = self.age_input.text
     email = self.email_input.text

     if name and age and email:
         message = f"Form submitted successfully!\n\nName: {name}\nAge: {age}\nEmail: {email}"
     else:
         message = "Please fill in all fields!"

     popup = Popup(title="Form Submission", content=Label(text=message), size_hint=(None, None),
                   size=(400, 200))
     popup.open()

Here we define a method to the app. If reads the input form user. If all the fields are entered then entered values is shown on the popup. Else show a alert message. 

Popup is used to show message to user.

Bind the function to button click

submit_button.bind(on_release=self.submit_form)

Here we are binding the submit_form function to the button. This function is called when the button is released after clicking.

Complete code

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.popup import Popup
from kivy.uix.textinput import TextInput


class MyApp(App):

    def submit_form(self, instance):
        name = self.name_input.text
        age = self.age_input.text
        email = self.email_input.text
        if name and age and email:
            message = f"Form submitted successfully!\n\nName: {name}\nAge: {age}\nEmail: {email}"
        else:
           message = "Please fill in all fields!"

        popup = Popup(title="Form Submission", content=Label(text=message), size_hint=(None, None),
                   size=(400, 200))
        popup.open()

    def build(self):
        layout = BoxLayout(orientation='vertical', spacing=10, padding=40)
        self.name_input = TextInput(hint_text="Name")
        self.age_input = TextInput(hint_text="Age")
        self.email_input = TextInput(hint_text="Email")
        submit_button = Button(text="Submit")
        submit_button.bind(on_release=self.submit_form)
        layout.add_widget(self.name_input)
        layout.add_widget(self.age_input)
        layout.add_widget(self.email_input)
        layout.add_widget(submit_button)
        return layout

if __name__ == '__main__':
    MyApp().run()

Output

Success image

Warning image

Hope you have learned something from this post. In the next post we will create a to do list app using Python. Please make sure that you have read “SQLite3 operations with Python”. 

Please share valuable suggestions with afsal@parseltongue.co.in