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.

I – About the tutorials

(If you had read another tutorial, you can go to the topic III, because I and II is the same in all tutorials)

All my next posts will be about this tutorial series. I’ll show you how to use each mobile API, like compass, camera, sensors, sound, and others. After the API, we will start to test some Python libs, as PyGame and OpenCV. I’m using Android with buildozer, but some libs are compatible with iOS too(I’ll tell you when it’s compatible), so if you test it, send a feedback if possible.

In each post, I’ll show a sample app using on of them. When I finish all the tutorial, you will be able to develop almost any app with Python. In the principle, I’m not going to show the design stuff, but I recommend you to check Kivy and PySide. After finishing theses tutorials, maybe I can start a tutorial series about Kivy, for the design, but it’s easier to find at Google 🙂

You can check the Github repo here, and if you like it, please, star it 🙂

To be able to read all the tutorials, please follow my blog or subscribe your email to get updates. Another important thing if your feedback. I’m Brazilian and trying to write in English, so if you have any problem, please, just let me know. To make the tutorials better ,try to comment always that is possible, showing your experiences, tips for a better tutorial, and this kind of stuff.

Before start, you can check this links to configure all the prerequisites:

II – Index

You will be able to get the links for all tutorials here, I’ll be updating when a new tutorial is published.

Tutorial #1 – Accelerometer

Tutorial #2 – Camera

Tutorial #3 – Kivy Designer

Tutorial #4 – Debug

Tutorial #5 – Android and iOS game with Python

Tutorial #6 – Reading and saving user data

Tutorial #7 – Use Android classes with PyJNIus

III – About this tutorial

You can download the APK here.

In this post you will learn about Kivy Designer. This tool still in Alpha version, but it’s very helpful.

Prequisites:

Kivy 1.8+

The following Python modules (available via pip) watchdog, http://pythonhosted.org/watchdog/ pygments docutils

The FileBrowser widget from the Kivy garden

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 prequisites 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.

This is your Kivy Designer.

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. Now, open the Toolbox tab and add new widgets.

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:

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

First, check if everything is working.

Now, open your terminal, and inside de 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. Thank’s for reading, if you have any problem or anything else, comment here 🙂

Hey!! I’m available for freelances!! If you need anything, just contact me!