create account

[Tutorial] Kivy App Development( Part 1) by yalzeee

View this thread on: hive.blogpeakd.comecency.com
· @yalzeee ·
$6.32
[Tutorial] Kivy App Development( Part 1)
![images.png](https://cdn.steemitimages.com/DQmYqni9vxME8D1tzy4wZGgu8CT8zK2Goq5cwDaQia7Zg7J/images.png)
[image source](https://goo.gl/images/HbqzGY)
**Repository**: [Python, Open Source Repository](https://github.com/python)

**Software**: For software download python 3.0 compatible with your OS [here](https://www.python.org/downloads/)

**Difficulty** : Intermediate
**What you will learn**:
In this tutorial you will learn how to
-  This an alternative beginners guide to using the ``kivy`` module and its functions.
 
- How to begin Andriod app development with kivy.

- How fix common problems faced with using kivy.

**For my previous posts in the python tutorial series**
-[Click Here* Creating a simple calculator using python 3.8(cpython)](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-a-simple-calculator-with-basic-command-with-python-fix-bugs-in-your-code)

**Creating an encryption key(Cryptography)**
-[ Part 1](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-cube-encryption-key-using-python-3-0-part-1)
-[ Part 2](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-encryption-key-in-python-3-6-part-2)
-[ Part 3](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-visual-cube-encryption-program-with-python-3-6-part-3)
-[ Part 4](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-encryption-program-with-python-3-6-part-4)

**Developing an institutions data collection backend and frontend with python 3.6 series**
[Part 1 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-backend-using-python-3-6-part-1)
[Part 2 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-using-python-3-6-part-2)
[Part 3 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-with-python-3-part-3)
[Part 4 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-4)
[Part 5 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-5)
[Part 6 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6)

**Previous Series**
[Automating OnScreen Processes](https://steemit.com/utopian-io/@yalzeee/tutorial-navigation-and-system-interaction-automating-system-processes-in-python-development)
[Screen Mapping and Navigation](https://steemit.com/utopian-io/@yalzeee/tutorial-image-recognition-and-screen-mapping-in-python-developments-part-2)
[Packaging and Deploying](https://steemit.com/utopian-io/@yalzeee/tutorial-packaging-and-deploying-part-3)

**Tutorial**
For a beginner that hopes to start up with kivy, this tutorial would elucidate on a lot of aspects of kivy which most feel are not simplified enough for beginners. To explain the process, I would be building a Simple Tetris App from scratch and deploying it on an android platform. This tutorial would make things easier by separating development into distinguishable and comprehensive steps. Kivy is very favourable for python developers since it enables us run our programs on Andriod, ios and basically any cpu driven device. Note that kivy is specially made for Touch Screen Devices. This should get clearer within the series.

**Kivy**
For information on official documentation and Installation guides [Click Here](https://kivy.org/docs/gettingstarted/intro.html). 

**Starting Up**
As stated earlier we would be building a Simple Tetris App to help understand how kivy works. 
**Note**: I would be seperating steps for better understanding as the ``kivy`` module is quite complex and takes sometime to take in.

**Importing Modules**
Before you get started in kivy, it is advisable to import all neccesary modules at once at the beginning of your project. This is a listing of all the functions we will be needing and the reasons we will be needing this modules.
The first Module we would be importing is the ``kivy`` module.
```
 from kivy import *
#The use of this function in this code is to state the required version for kivy for this program to work
kivy.require('1.9.0')
from kivy.app import App
#This is the kivy function that lets us run our app on andriod, ios and other consoles. It is the backbone of your program
from kivy.uix.widget import Widget
#Widgets are vital for creating structures and giving commands to these structures in kivy. They come with default canvases for drawing.
from kivy.uix.label import Label
# Labels just as their name means are for adding text labels to your program.
from kivy.uix.boxlayout import BoxLayout
# Box Layouts are a set of functions that help us determine the structure of our program.

from kivy.config import Config
# This module is very important for window errors encountered during kivy startups. Without editing this module
It is common to get errors telling you to upgrade your graphic card. Using these lines of code should prevent that if it comes up
Config.set('Config','Multisample', '0')

from random import randint
kivy.clock import Clock
#This module is important in animating our widgets
```

**Creating Our Widgets and Layouts**
Apart from developing the logic for applications kivy is a package that helps us create our Logic beside our Gui.
**Note**: Although this module helps us do this. It is not advisable to put Gui and logic in the same file as it can mix things up alot during development and so kivy gives us a method to seperate our styling from our logic by saving the styling in a similar manner as css in the same folder as your logic file.
To explain this i would show you two instances of the same file but with different formats
``main.py``
```
#Method 1
class HelloWorldApp(App)
    def build():
        return Label(text='helloworld')

if __name__=='__main__':
    HelloWorldApp().Run()
```
``main.py``
```
#Method 2
class HelloWorldApp(App)
    def build():
        return Label
```
``helloWorld.kv``
```
<Label>:
   text: 'HelloWorld'
```
This two pieces of code will yield the same result but it is observable that in ``method1``, the code is all within the ``main.py`` file while in ``method 2``, the styling is within the ``helloworld.kv`` file while the logic is in the ``main.py`` file.
**Note**: The name of the ``.kv`` file must be equal to the name of the app within the ``main.py`` file and located in the same folder to enable the program to find it. 
So using ``Method 2`` Lets begin writing our game.
```
#First thing we Define a widget for the game
class TetrisGame(Widget):
    #Importing from the parent Widget
    pass

#Then we Define our Board or main game area
class Board(Layout):
    pass

#Then we define the main app which is the build point for program
#Fancy way of saying this is where our program runs from
class TetrisApp(App)
   def build(self):
        return TetrisGame()

if __name__=='__main__':
    TetrisApp.run()
#And standard python synthax for running our new code
```
So if you did everything right you should see a blank screen like the one below pop up.
![Screenshot (22).png](https://cdn.steemitimages.com/DQmZL1MnY9HLVWs7Deh2UQdB7TGbqB8zLkXhXm8oHQ8u7CH/Screenshot%20(22).png)
This tutorial continues in the next of its series.

You can find the [Code for this tutorial](https://github.com/yalzeee/Python-tutorial-series/blob/master/Kivy%20Tetris%20App) in Github
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 40 others
properties (23)
authoryalzeee
permlinktutorial-kivy-app-development-part-1
categoryutopian-io
json_metadata{"tags":["utopian-io","tutorials","programming","stach","wafrica"],"image":["https://cdn.steemitimages.com/DQmYqni9vxME8D1tzy4wZGgu8CT8zK2Goq5cwDaQia7Zg7J/images.png","https://cdn.steemitimages.com/DQmZL1MnY9HLVWs7Deh2UQdB7TGbqB8zLkXhXm8oHQ8u7CH/Screenshot%20(22).png"],"links":["https://goo.gl/images/HbqzGY","https://github.com/python","https://www.python.org/downloads/","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-a-simple-calculator-with-basic-command-with-python-fix-bugs-in-your-code","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-cube-encryption-key-using-python-3-0-part-1","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-encryption-key-in-python-3-6-part-2","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-visual-cube-encryption-program-with-python-3-6-part-3","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-encryption-program-with-python-3-6-part-4","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-backend-using-python-3-6-part-1","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-using-python-3-6-part-2","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-with-python-3-part-3","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-4","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-5","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6","https://steemit.com/utopian-io/@yalzeee/tutorial-navigation-and-system-interaction-automating-system-processes-in-python-development","https://steemit.com/utopian-io/@yalzeee/tutorial-image-recognition-and-screen-mapping-in-python-developments-part-2","https://steemit.com/utopian-io/@yalzeee/tutorial-packaging-and-deploying-part-3","https://kivy.org/docs/gettingstarted/intro.html","https://github.com/yalzeee/Python-tutorial-series/blob/master/Kivy%20Tetris%20App"],"app":"steemit/0.1","format":"markdown"}
created2018-08-23 02:44:36
last_update2018-08-23 02:44:36
depth0
children5
last_payout2018-08-30 02:44:36
cashout_time1969-12-31 23:59:59
total_payout_value4.905 HBD
curator_payout_value1.415 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,599
author_reputation12,484,565,044,191
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,076,785
net_rshares4,340,557,867,828
author_curate_reward""
vote details (104)
@portugalcoin · (edited)
$4.63
Thank you for your contribution.

- In your code we suggest you make short comments with a brief description of the functions.
- Tutorial is too short.
- Try to improve the structure of your tutorial so that it is easy to read. I suggest you follow this template <a href="https://github.com/utopian-io/editor-templates/blob/master/tutorials">Link</a>.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/31323434).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , ,
properties (23)
authorportugalcoin
permlinkre-yalzeee-tutorial-kivy-app-development-part-1-20180823t181716644z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/utopian-io/editor-templates/blob/master/tutorials","https://join.utopian.io/guidelines","https://review.utopian.io/result/8/31323434","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-08-23 18:17:15
last_update2018-08-23 21:20:12
depth1
children1
last_payout2018-08-30 18:17:15
cashout_time1969-12-31 23:59:59
total_payout_value3.495 HBD
curator_payout_value1.132 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length843
author_reputation598,828,312,571,988
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,149,281
net_rshares3,170,809,445,511
author_curate_reward""
vote details (7)
@utopian-io ·
Thank you for your review, @portugalcoin!

So far this week you've reviewed 2 contributions. Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-yalzeee-tutorial-kivy-app-development-part-1-20180823t181716644z-20180825t004508z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-25 00:45:09
last_update2018-08-25 00:45:09
depth2
children0
last_payout2018-09-01 00:45:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length115
author_reputation152,955,367,999,756
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,276,722
net_rshares0
@steem-ua ·
Hi @yalzeee! We are @steem-ua, a new Steem dApp, computing UserAuthority for all accounts on Steem. We are currently in test modus upvoting quality Utopian-io contributions! Nice work!
properties (22)
authorsteem-ua
permlinkre-tutorial-kivy-app-development-part-1-20180823t201357z
categoryutopian-io
json_metadata"{"app": "beem/0.19.54"}"
created2018-08-23 20:13:57
last_update2018-08-23 20:13:57
depth1
children0
last_payout2018-08-30 20:13:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length184
author_reputation23,214,230,978,060
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,157,497
net_rshares0
@steemitboard ·
Congratulations @yalzeee! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@yalzeee) Award for the number of upvotes received

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>


To support your work, I also upvoted your post!


**Do not miss the last post from @steemitboard:**
[SteemitBoard and the Veterans on Steemit - The First Community Badge.](https://steemit.com/veterans/@steemitboard/steemitboard-and-the-veterans-on-steemit-the-first-community-badge)

> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-yalzeee-20180823t064556000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-08-23 06:45:57
last_update2018-08-23 06:45:57
depth1
children0
last_payout2018-08-30 06:45:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length960
author_reputation38,975,615,169,260
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,093,430
net_rshares0
@utopian-io ·
$0.02
Hey @yalzeee
 **Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
πŸ‘  ,
properties (23)
authorutopian-io
permlinkre-tutorial-kivy-app-development-part-1-20180824t024533z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-24 02:45:33
last_update2018-08-24 02:45:33
depth1
children0
last_payout2018-08-31 02:45:33
cashout_time1969-12-31 23:59:59
total_payout_value0.018 HBD
curator_payout_value0.003 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length300
author_reputation152,955,367,999,756
root_title"[Tutorial] Kivy App Development( Part 1)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,182,916
net_rshares15,713,367,865
author_curate_reward""
vote details (2)