KivyMD Tutorial for Beginners: Create an Instagram Clone in Python!

Watch the video version of this post here: https://youtu.be/giSh7TDoCUMs

The best way to learn any framework or tool is to learn by building something. Kivy and kivymd are no different. You can use these tools to create android apps and IoS apps using Python programming language. In this tutorial, we will learn kivy and kivymd by making an Instagram Clone. So let's begin. But before that make sure you have kivy and kivymd installed. If you use PyCharm IDE you will find the "Python Packages" section down at the bottom, you go there and search for whatever packages you want to install and install them directly.

Start by creating a new project in PyCharm and create a new .py file named main.py. This is entry point of your application which will branch to other screens and pages.

Part 1: The Basics of KivyMD

Let's begin importing some stuff from kivymd library that we'll use:

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel

Then we will create a class MainApp, and in paranthesis () we write MDApp. By doing this you are telling python that our class MainApp extends the class MDApp which we imported in the beginning.

class MainApp(MDApp):

When a class extends another class, it inherits all the functions of the parent class. Then we will define a function within our MainApp class called build.

    def build(self):
        return MDLabel(text="Testing..1..2..3", halign="center")

We imported MDLabel from kivymd library earlier. MDLabel is a UI element which displays text. Our build function returns an MDLabel with text "Testing...1..2..3" and we set it's horizontal alignment attribute halign to center. Finally at the end of your code initialise our MainApp() class:

MainApp().run()

Now run our main.py program and you should see this:

This is the most basic Kivymd program that one can write. Here's the entire code:

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel


class MainApp(MDApp):
    def build(self):
        return MDLabel(text="Testing..1..2..3", halign="center")


MainApp().run()

Get ready guys, we are going to turn this hello-world program into Instagram. But first let's make the size of the window of our application more phone-like:

Within the build(self) function, add this as the first line of code:

Window.size = [300, 600]

But we have not imported Window so add this in the beginning of your code:

from kivy.core.window import Window

Part 2: Designing Appbar, Modifying text, icon buttons and Box Layout.

Create a new file called home_page.kv in the your project folder. We will the write the UI of our home-page screen in home_page.kv using a very simple css-like syntax that comes with kivy. As you will see it makes thing a lot easier.

Add this code above the MainApp class in main.py:

from kivymd.uix.screen import MDScreen

class HomePage(MDScreen):

We imported MDScreen from kivymd and create a class named HomePage which extends MDScreen that we just imported. Since our class is empty, it will show an error. Just write some string with in the class to remove the error, like this:

from kivymd.uix.screen import MDScreen

class HomePage(MDScreen):
    'Home Page'

Now let's add stuff to home_page.kv:

<HomePage>:
    MDBoxLayout:
        MDLabel:
            text: 'Instagram'
            halign: 'center'

Writing <HomePage>: tells kivy that the contents the lie ahead belong to the class HomePage. Everything is a widget in kivy and kivymd. We used one widget in the beginning called MDLabel for displaying text. Here we use another widget called MDBoxLayout which lays out or organises elements on the screen. We set it's padding to 5dp. dp is a unit of measurement and it stands for "device independent pixels".

Within MDBoxLayout we add a MDLabel and set it's attributes like we did earlier. But earlier we were using python and now we are using the KV language which is much simpler. You can checkout all the kivymd widgets and how to use them in kivymd documentation. It's very useful and we will refer to it all the time.

Let's add some more properties to our MDLabel and MDBoxLayout:

<HomePage>:
    MDBoxLayout:
        padding: '5dp'
        adaptive_height: True

        MDLabel:
            text: 'Instagram'
            halign: 'center'
            valign: 'center'
            font_size: 25

I added vertical alignment and font size. Let's change the font size as well. Go to this this link and download the Instafont.otf. Create a new folder in your project folder called assets and move Instafont.otf in that directory. We will now change the font-name attribute to 'assets/Instafont.otf' which is the address of the font file:

<HomePage>:
    MDBoxLayout:
        padding: '5dp'
        adaptive_height: True

        MDLabel:
            text: 'Instagram'
            halign: 'center'
            valign: 'center'
            font_size: 25
            font_name: 'assets/Instafont.otf'

But wait! Our main.py still dosen't know anything about home_page.kv. Here is our code untill now:

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivy.core.window import Window
from kivymd.uix.screen import MDScreen


class HomePage(MDScreen):
    'Home Page'

class MainApp(MDApp):
    def build(self):
        Window.size = [300, 600]
        return MDLabel(text="Testing..1..2..3", halign="center")


MainApp().run()

Replace the return MDLabel... argument of your build function with this:

return HomePage()

And we need to load home_page.kv, so just above return HomePage() add:

Builder.load_file('libs/screens/home_page.kv')

And import Builder as well:

from kivy.lang import Builder

Now your code should look like this:

from kivymd.app import MDApp
from kivy.core.window import Window
from kivy.lang import Builder
from kivymd.uix.screen import MDScreen


class HomePage(MDScreen):
    'Home Page'


class MainApp(MDApp):
    def build(self):
        Window.size = [300, 600]
        Builder.load_file('libs/screens/home_page.kv')
        return HomePage()


MainApp().run()

Run your code and the output should look something like this:

Our MDLabel is pushed down! Don't worry we will fix that. Let's add some icons in our toolbar/appbar, edit your home_page.kv:

<HomePage>:
    orientation: 'vertical'
    # App Bar
    MDBoxLayout:
        padding: '5dp'
        adaptive_height: True

        MDIconButton:
            icon: 'plus'

        MDLabel:
            text: 'Instagram'
            halign: 'center'
            valign: 'top'
            font_size: 25
            font_name: 'libs/assets/Instafont.otf'

        MDIconButton:
            icon: 'facebook-messenger'

We added two MDIconButton widgets and set their icon-type. Now if you run your program you can see it looks better:

We want our toolbar on top of the screen, it will go on top after we add the add other components below it, so don't worry about it.

Before we do anything else let's move our app bar under another MDBoxLayout widget (we are going to add more Boxes which will contain stories tab and posts etc):

<HomePage>:
    orientation: 'vertical'
    MDBoxLayout:
        orientation: 'vertical'
        # App Bar
        MDBoxLayout:
            padding: '5dp'
            adaptive_height: True

            MDIconButton:
                icon: 'plus'

            MDLabel:
                text: 'Instagram'
                halign: 'center'
                valign: 'top'
                font_size: 25
                font_name: 'libs/assets/Instafont.otf'

            MDIconButton:
                icon: 'facebook-messenger'

Below our app bar we will add a ScrollView which is widget in Kivy that allows us to create a scrollable list of items:

        # Stories
        ScrollView:

If you run the app, now you can see our app bar is placed at the top of the screen where it belongs:

You can learn more about ScrollView through the very well written documentation of kivy. I will leave the rest to you, here's the rest of the code for the instagram clone made with python using kivymd. Continue writing the program peice by peice, refer to the kivy and kivymd documentation and you'll figure it out. If you get stuck anywhere, you can dm me on twitter, i will try to make a video about it. Good Luck!

Originally published at avionmission.github.io on November 16, 2021.