Python for Android Tutorial #3 – User Interface with Kivy Designer

Welcome!

This is the third post about mobile development with Python.

It’s a short tutorial, just to help you to understand and learn how to work with Python for Mobile.

In this post you will see how to create user interfaces with Kivy Designer. This post is compatible with any OS supported by Kivy.

Python Mobile course

III - About this tutorial

In this post you will learn about Kivy Designer.

This tool still in Alpha version, but it’s very helpful.

Prequisites:

To install the FileBrowser enter the console (on winodws use kivy.bat in the kivy folder):

pip install kivy-garden
garden install filebrowser

With the perquisites installed, you can use the designer:

  
git clone http://github.com/kivy/kivy-designer/
cd kivy-designer
python main.py

If you get any error in this step, feel free to comment here :)

IV - A Sample App

To test Kivy Designer, create a New Project and let’s use the TabbedPanel template.

New Project

This is your Kivy Designer:

Kivy Designer Screen

First, if you want to learn more about it, make some changes in the KV Lang Area, and check how it modify your UI. You can learn more about KV Lang here. Next, open the Toolbox tab and add new widgets just to test.

Now, to start our project, in the Item 1, add two Buttons: ‘New Tab’ and ‘Close Tab’ inside the BoxLayout. You can remove the others tabs. In the events tab, edit the signal on_press and theses buttons.

In an event, you need to set the method name. First a prefix, app for a MainApp method, or root for a RootWidget method.

In this tutorial, I’ll create two callbacks, btn_new_on_press() and btn_close_on_press(), both of them in the RootWidget object.

Now we have the following KV code:

<RootWidget>:
    TabbedPanel:
        id: tab_panel
        do_default_tab: False

        TabbedPanelItem:
            id: tab_1
            text: 'Tab 1'
            BoxLayout:
                Button:
                    on_press:   root.btn_new_on_press()
                    text: 'New Tab'
                Button:
                    on_press:  root.btn_close_on_press()
                	text: 'Close tab'  

Now we will add some Python code.

When you click in the New Tab, a new Tab will be created with the same content of the first one. Close Tab will close the current tab.

Open your main.py file and add the methods in the RootWidget class:

__version__ = 1.0

from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class RootWidget(FloatLayout):
	def __init__(self): #init the obj
		super(RootWidget, self).__init__()
		self.max_id = 1

	def btn_close_on_press(self):#callback. Close the current tab
		panel = self.ids.tab_panel #get the tab_panel by id
		tab = panel.current_tab #get the current tab
		panel.remove_widget(tab) #remove tab from tablist

	def btn_new_on_press(self):# callback; Add a new Tab
		panel = self.ids.tab_panel
		#create a tab by KV string
		tab_str = '''
TabbedPanelItem:
	id: tab_%d
	text: 'Tab %d'
	BoxLayout:
		Button:
			id: btn_new
            text: 'New Tab'
        Button:
            id: btn_close
            text: 'Close tab'
		'''
		self.max_id += 1 #max tab id
		tab = Builder.load_string(tab_str %(self.max_id, self.max_id)) #create a widget by string
		tab.ids.btn_new.on_press = self.btn_new_on_press #set events
		tab.ids.btn_close.on_press = self.btn_close_on_press
		panel.add_widget(tab) # add the tab


class MainApp(App):		
	def build(self):
		return RootWidget()

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

Now save your project and check if it’s running.

V - Running on Android and iOS

Popen your terminal, and inside the project folder run the command bellow to create a buildozer project:

  
buildozer init

Now, open buildozer.spec and edit if necessary.

To run on Android, run the command:

buildozer android debug deploy run

Or, if you are going to run on iOS, run:

buildozer ios debug deploy run

This is the app running on my Android device:

That’s all. Thanks for reading, if you have any problem or anything else, comment here :)

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading