Making your first Android game in Kivy & Python (Part 1)

Photo by Luca Bravo on Unsplash

Yep. You read it right! We are going to make a game using only Python and Kivy. This tutorial series will walk you through each step you need to take. The game we are going to make is no other than Tic-Tac-Toe. Here’s a demo of the final application.

Tic-Tac-Toe Game using Kivy and Python

So let’s start!

Introduction

So, first of all, we need to know our tools, so we know what we are working with.

Python — Python is an interpreted, high-level, general-purpose programming language. This game will be majorly written in Python. But, why Python, You may ask? Because it’s beginner-friendly, concise, and easy to learn.

Kivy — Kivy is a free and open-source Python library for developing mobile apps and other multi-touch application software with a natural user interface. In simpler terms, it is a framework which helps python to support multi-touch devices like smartphones and tablets.

KivyMD — KivyMD is a collection of Material Design compliant widgets for use with Kivy.

Buildozer — Buildozer is a tool that aims to package the mobiles’ application easily.

We will be working on Linux, as it is currently not possible for buildozer to run on Windows.

Getting Started

So, first of all, let’s download and install the pre-requisites.

1. Head over to www.python.org/downloads/ and download and install Python3 for your system.

Python’s official website

2. Next visit https://kivy.org/doc/stable/installation/installation-linux.html and follow the instructions to install Kivy.

Kivy Linux Installation

3. Next, open terminal and run the following commands —

$ wget https://github.com/HeaTTheatR/KivyMD-data/raw/master/install-kivy-buildozer-dependencies.sh
$ chmod +x install-kivy-buildozer-dependencies.sh
$ ./install-kivy-buildozer-dependencies.sh

wget https://github.com/HeaTTheatR/KivyMD-data/raw/master/install-kivy-buildozer-dependencies.sh

./install-kivy-buildozer-dependencies.sh

4. Finally run the following command in the terminal —

python3 -m pip install kivymd

python3 -m pip install kivymd

Now we are ready to start making our game. But, first, we will make a basic app so that we can learn the basics.

Building a basic Android app

In this section, we are going to make an interactive Android app with Python and Kivy.

This is the demo of the app we are going to make.

Setting up environment

First, make a local git repository by running the following commands in the terminal —

$ git init kivy_first_app
$ cd kivy_first_app/

git init kivy_first_app

Next, create a python file by running the following command —

$ touch main.py

touch main.py

Next, open the file in your favourite IDE (mine is obviously VS Code), and then we can start programming.

Programming the main logic of the app

First of all, we need to import the kivy module into our python file. But we do not need the complete library for our project we will only need the App class from the library, so we need to write this line in our main.py file —

from kivy.app import App

We are also going to import the label and button class from kivy, so that we can display a button and a label in our app.

from kivy.uix.label import Label
from kivy.uix.button import Button

We will also need to import the BoxLayout widget class from kivy so that we can return these label and button widgets to the main app. (More on this, later.)

from kivy.uix.boxlayout import BoxLayout

So, until now our code looks like this —

main.py

Note: In some newer versions of Kivy, you do not actually need these imports, except the App class, so in that case our code would be something like this —

main.py

Next, we need to make our custom class which will inherit from the App class of the Kivy module.

I am going to name it FirstApp. The name of this class is important as the kivy recognises this as the name of the application. According to Kivy, the name of any application is the lowercase name of the class without the App suffix. So, in this case, the name of the application would be first. Also, we will use this name in naming our kivy layout file, but, more on that, later.

Our class is used here for the naming purpose, rest work will be done by our kivy layout file.

class FirstApp(App):
    pass

We, are now going to add a main function to our program —

if __name__ == "__main__":
    FirstApp().run()

This creates an instance of our app and calls the run() method which is defined in the App class, which we inherited.

main.py

This completes our main.py file.

So, let’s move onto the layout of the application.

Designing our app’s layout

First of all, create a kivy layout file by running the following command —

$ touch first.kv

touch first.kv

Notice the name of the file. As discussed earlier, it should be named according to the class name in our main.py. It also has an extension of .kv which is due to the fact that this is a kivy layout file.

Next, we will declare our layout class inside this first.kv file.

To do that we will write the name of our class inside angular brackets. We will also inherit the BoxLayout class in our FirstLayout class that we created just now by using the ‘@’ symbol. The class can be of any name which follows the kvlang guidelines.

To do this write the following code in your first.kv file —

<FirstLayout@BoxLayout>:

We will also define a count variable in our class, which we will be using later.

To define variables inside classes in kivy layout files, we need to write the variable name along with a colon (assignment operator in kvlang) and then the value.

In this case, that would be —

<FirstLayout@BoxLayout>:
    count: 0

Also, notice the indentation. Kvlang is also tab-sensitive as Python.

Now, we need to set some properties of FirstLayout class. These properties are inherited from the BoxLayout class.

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10

Next, we will be adding a Label widget to our FirstLayout Class.

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10
    Label:
        text: "Hello!"

Before, adding anything else to our class, let’s first try this out, and run this app.

For that, first we will need to create an instance of this FirstLayout class —

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10
    Label:
        text: "Hello!"
FirstLayout:

Notice that we didn’t have any properties of FirstLayout instance. But, it should still work.

Our code up until now —

first.kv

Now, to run this we run this command in the terminal —

$ python3 main.py

python3 main.py

Our First App

Congrats! You have successfully created your first Kivy App.

Adding more functionality

But it is quite boring, so, let’s make it more interactive.

First of all, let’s add a button to this app. We will name this button “Press Me”. We will also add a size_hint property. This property accepts a tuple of float values between 0 and 1. The first value specifies the value for width and the second one is for the height of the button.

We will also add an on_press property which accepts a callback. In this case, we will use this property to increment our counter variable by 1. Also, notice that we call class variables by adding root along with the dot operator. This helps in setting the scope of the variable.

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10
    Label:
        text: "Hello!"
    Button:
        text: "Press Me"
        size_hint: (1,0.3)
        on_press: root.count=root.count+1
FirstLayout:

But we couldn’t see the count variable on the screen up until now, so let’s fix that.

We can write Python syntax after the colon (assignment operator) in kivy layout file, so we are going to use some python nested if-else condition statements to display the counter on the screen.

Syntax for if-else condition —

Label:
   text: 'value1' if condition else 'value2'

Here we can see that the Label would show ‘value1’ when the condition would be true or else it would show ‘value2’.

Applying this knowledge into our code, we get —

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10
    Label:
        text: "Button Not Pressed" if root.count==0 else "Button is pressed "+str(root.count)+" time!" if root.count==1 else "Button is pressed "+str(root.count)+" times!"
Button:
        text: "Press Me"
        size_hint: (1,0.3)
        on_press: root.count=root.count+1
FirstLayout:

Let’s break this down for you. This is basically a nested if-else condition. This Label would show “Button not Pressed” when count variable is equal to 0 else it will check if the counter variable is equal to 1; if true, then it will show “Button is pressed 1 time!” or else it will show “Button is pressed {count} times!”.

first.kv

Let’s give this a try!

$ python3 main.py

python3 main.py

Our first functional app

Congrats! You have successfully made your first fully functional interactive app in about 25 lines of code!

Complete main.py file —

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
class FirstApp(App):
    pass
if __name__ == "__main__":
    FirstApp().run()

Complete first.kv file —

<FirstLayout@BoxLayout>:
    count: 0
    orientation: "vertical"
    padding: 10
    Label:
        text: "Button Not Pressed" if root.count==0 else "Button is pressed "+str(root.count)+" time!" if root.count==1 else "Button is pressed "+str(root.count)+" times!"
Button:
        text: "Press Me"
        size_hint: (1,0.3)
        on_press: root.count=root.count+1
FirstLayout:

Conclusion

This ends the part one of the series.

At the end of the series we will have a fully functional Tic-Tac-Toe game app running on our Android devices.

Final game we will be creating in the series!

If you can’t wait for the next part of the series, or if you are interested in the code of the final game, head over to https://github.com/Hash-Studios/Kivy-Tic-Tac-Toe to view the full code!

LiquidatorCoder/Kivy-Tic-Tac-Toe

See you in the next part!