DEV Community

Cover image for Introduction to the Kivy development cycle, KIVY 2.0
TobiasHT
TobiasHT

Posted on

Introduction to the Kivy development cycle, KIVY 2.0

Hello Devs, This is the second article I'm writing about how to develop mobile apps with Python and the kivy framework.
Last time we talked a little about kivy and we were able to compare it with other mobile frameworks. We also compared it to flutter and saw the valuable advantages it has over it.
Today, we're starting our first phase of learning the actual Kivy framework.

Kivy in a nutshell

Let's talk about Kivy's structure for a second.
Kivy is built on top of SDL2, a powerful C graphics library. The link between the SDL2 C code and the Python code built on top of it is built using Cython.
The kivy project folder contains various python modules. You will not be able to interact with all these modules directly, because some of them are abstract and are used to implement concrete modules.
That being said, the main modules in the kivy package that you will interact with the most are:

  1. app
  2. uix
  3. graphics
  4. lang
  5. core
  6. properties

Proceeding, those aren't the only modules you will need to build an optimized app. However, they are the basic parts you'll not miss out while building any app in Kivy. But what exactly is contained in these modules, let's find out.

app

The app module contains the App class.
The App class is the main entry point for a user into your application. It runs the entire application loop that the user will interact with. Import the App class as shown below

from kivy.app import App
Enter fullscreen mode Exit fullscreen mode

if you're using python interactively, you'll see something like this on Windows
first-kivy-import
Kivy will start up some dependencies that it relies on such as SDL2, Gstreamer and many others. Once the loading process is done, now you can start building some UI elements.

uix

The uix module is one of the biggest kivy modules. It contains the implementations of all of Kivy's UI elements suchs as buttons,labels,text inputs and many others.
The uix module contains submodules that are written in small letters. The submodules contain classes with the same name as the submodule, but with the first letters capitalized.
for example

from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
Enter fullscreen mode Exit fullscreen mode

The widgets in the uix module are divided into the Display widgets and the layout widgets.
The display widgets are the ones that physically appear on the user's screen while the layout widgets provide means to organize the display widgets in a certain pattern.
For example, the boxlayout organizes widgets vertically or horizontally, the gridlayout organizes widgets in rows and columns and other layouts organize widgets in various ways.

use what we have so far

Lets see how we can display a simple button in kivy.
here we go

from kivy.app import App
from kivy.uix.button import Button

class ButtonApp(App):
    def build(self):
        return Button(text = "my-first-button")

if __name__ == "__main__":
    ButtonApp().run()
Enter fullscreen mode Exit fullscreen mode

Alright, if you very new to a framework, seeing code like this might throw you off a little. This is actually simple code to read, but the questions on how it works are the most aching. Let me try to answer some here.
First, we imported our App class like we discussed above. However, this class is an abstract class, that is, it has "empty" methods that need to be implemented by the subclass or child class.
One of those abstract methods is the build method. This method returns the root widget of the Kivy application that shall be ran.
In our build method, we returned a button widget as our root widget with "my-first-button" as our display text.
Finally, we used the standard default conditional statement to run the script and we called the run method of our ButtonApp. the run method is actually implemented in the App abstracted class which we subclassed.
Once we run this script, we get a big gray button that fills up the entire app window. The button turns blue when pressed and changes back to gray when released.
kivy button

conclusion

That's it for today. I've just merely given you a glimpse about kivy. It surely gets more complicated than that. However once you master this framework, the apps you'll build will be incredible.
We shall keep discussing the rest of the modules as time goes on. For today however, this is where it ends

Discussion (0)