Home » Kivy Tutorial

Kivy Tutorial

Kivy Tutorial

Kivy tutorial provides basic and advances concepts of Kivy. Our Kivy tutorial is designed for beginners as well as working professionals.

Kivy is a multi-platform application development framework for Python. It allows us to develop multi-platform applications on various platforms such as Windows, Linux, Android, macOS, iOS, and Raspberry Pi.

In our Kivy tutorial, we will discuss the following topics –


What is Kivy?

  • Kivy is an open-source and Graphical User Interface (GUI) development platform for Python.
  • It helps us to develop mobile applications and multi-touch application software with a NUI (Natural User Interface)
  • It allows developers to build an application once and use it across all devices.
  • It can also access mobile APIs to manipulate things such as the camera on a phone, GPS tracking, vibrator, and so on.
  • It contains various components for creating an application such as:
    • A graphical library OpenGL ES 2.
    • An extensive range of widgets that support multi-touch.
    • An intermediate Kv language to design custom widgets.
    • An extensive support for input devices such as a mouse, keyboard, TUIO, as well as OS-specific multi touches events.

Features of Kivy

There are the following cool features of Kivy –

1. Video

Kivy includes various modules to play video files and streams. Kivy Video player also supports some common requirements related to videos such as play, pause, stop buttons, text that can be used as a subtitle, display messages to the user on videos, and more.

Example: pygame video provider supports MPEG1 on Linux.

2. Multi-touch and gestures

Kivy uses a wide range of widgets that support multi-touch and gestures. Kivy developers provide a gesture library to record the user’s gesture.

There are the following three gestures that we can record –

  • Left to right horizontal line
  • Right to left horizontal line
  • Bottom to top vertical line

3. UI features

Kivy comes with a number of widgets and controls to make our mobile interface more attractive and beautiful. It is also used to improve one-handed usability, navigate gestures, create new icons or design elements, dark mode, and new animations.

4. Visual effects and OpenGL

Kivy uses PyGame for easily creating new games. PyGame comes with various modules to drawing shapes, dealing with colors, and playing music.

5. Flexible

Kivy is more flexible because it can run on a variety of devices, including Linux, mobile phones, windows, tablets, iOS, and Raspberry Pi. Kivy is flexible so it can adapt to new technologies quickly.

6. Free

Kivy framework is completely free to use. To work with Kivy, you must have 1 GHz 32 bit (x86), or 64 bit (x64) CPU, 1 GB of RAM, 128 MB of graphical memory, and Python installed on your system.


Advantages and Disadvantages of Kivy

Advantages

A list of advantages of Kivy is given below –

  • Kivy helps us to design innovative user interfaces with multi-touch functionalities.
  • It can smoothly work with various platforms such as Windows, Android, Linux, iOs, macOS, and Raspberry Pi.
  • It helps us to run code on all supported platforms.
  • It provides well-documented APIs.
  • It offers a better representation of programs, including classes, widget configuration, and inherited classes.
  • It performs better than HTML 5.

Disadvantages

  • Kivy uses kV language, which is not suitable for us to compile our code alone.
  • It is not always up-to-date with the latest Android APIs.
  • It takes a lot of time for building and compiling mobile applications.
  • The sizes of the package are unnecessarily huge.
  • It has a lack of community support.

Kivy Architecture

The below screenshot shows the Kivy Architecture –

Kivy Tutorial

Kivy Architecture contains the following components –

1. Core Providers and Input Providers

Kivy Providers mainly abstract the various core tasks includes opening a window, displaying images and text, playing audio, spelling correction, fetching images from a camera, and so on.

An input provider is a piece of code that helps us to add support for a specific input device such as TUIO, mouse emulator, or Apple’s trackpads. We can also add support for new input devices by providing a new class that reads our input data from our device and transform them into Kivy events.

2. Graphics

Kivy Graphics APIs have the ability to automatically optimize the drawing commands.

3. Core

Core provides the following features –

  • Clock
    A clock is used to schedule the timer events. Clock supported both one-shot timers and periodic timers.
  • Cache
    In Kivy, the cache is used to store python objects. We can control the cache in the following two ways –
    • Object limit
    • Timeout

Note: We can also create a new cache in the Kivy with the limit of 10 objects and a timeout of 5 seconds.

  • Gesture Detection
    Kivy uses a simple gesture detection, which is used to detect various types of strokes, circles, rectangles, or squares.
  • Kivy Language
    Kivy language is used to describe user interfaces more quickly and easily.
  • Properties
    In Kivy, properties classes are used to link our widget code to the user interface description.

4. UIX

The UIX module commonly contains Widgets and Layouts to quickly create a user interface.

Widgets

Widgets are the user interface components that we add to our program to provide some kind of functionality.

Example: file browser, buttons, lists, sliders, and more.

Layouts

Layouts are used to arrange widgets.

5. Modules

Modules are the classes that can be loaded on the Kivy when we start the Kivy application. The config file is used to manage the loading of modules.

Note: In Kivy, we can also write our own modules.

6. Input Events

Kivy Input events are an essential part of the kivy Architecture. Kivy abstract contains different input events such as touches, mice, TUIO, Mouse, MTDev, and HIDInput. We can also add 2D onscreen-position with any individual input event.

All input types are characterized by an instance of the touch () class. A touch () class instance can be one of the following three states.

  • Down
  • Move
  • Up

7. Widgets and Input Dispatching

The term Widgets are most frequently used in GUI programming to describe that part of the program which interacts with a user. In kivy, widgets are works as an object that receives input events. All widgets are arranged in the form of a widget tree. One widget may contain any number of child or none child.

Whenever new data is available, Kivy sends one per touch. Every event is first received by the root widget of the widget tree.


Kivy Installation on Windows

To install the kivy on Windows, first, we need to install Python and Anaconda on our system.

Follow the below steps to install Python –

Step 1: Copy-paste the below link on any browser or you just simply click on the below link – https://www.python.org/

Step 2: The following page appears on the screen, in which click on the Downloads and select Windows from the drop-down menu.

Kivy Tutorial

Step 3: Select the Python Releases version for windows.

Kivy Tutorial

Step 4: Double click on the downloaded file, the below window appears on the screen in which click on Install Now.

Kivy Tutorial

Step 5: The below screenshot shows that Python installation is in progress.

Kivy Tutorial

Step 6: The below screenshot shows that the setup is installed successfully. You just simply click on the Close button.

Kivy Tutorial

Now, follow the below steps to download the Anaconda –

Step 1: Click on the below link to install Anaconda https://www.anaconda.com/products/individual

Step 2: The following page appears on the screen. Scroll down the window and click on 64-bit Graphical Installer (446 MB) at the bottom of the screen.

Kivy Tutorial

Step 3: You can see that Anaconda Graphical Installer is to started download. Once the file is downloaded, double click on that executable file. The following window appears on the screen in which click on the Next.

Kivy Tutorial

Step 4: A License Agreement window appears on the screen, in which click on the I Agree.

Kivy Tutorial

Step 5: In Installer type, select Install for Just Me (recommended).

Kivy Tutorial

Step 6: Browse the location where you want to install Anaconda and click on the Next.

Kivy Tutorial

Step 7: An Advanced Installation Options window appears on the screen, tick on Register Anaconda3 as my default Python 3.7. And click on the Install.

Kivy Tutorial

Step 8: The below screenshot shows that Anaconda Installation is in progress.

Kivy Tutorial

Step 9: Once the Installation process is completed, click on the Next button.

Kivy Tutorial

Step 10: The following window appears on the screen in which click on the Next.

Kivy Tutorial

Step 11: A completing Anaconda set up window appears on the screen, simply click on the Finish on that window.

Install Kivy

Once you installed the Anaconda, now we are able to install kivy.

There are the following steps to install kivy –

Step 1: Go to the Anaconda Prompt.

Step 2: Before installing kivy, first update the pip by using the following command.

Step 3: Install the Dependencies

There are the following 3 dependencies that we need to install while installing the Kivy.

Step 4: Install Kivy

Use the following command to install Kivy.


Create a Hello World program in Kivy

There are the following steps to create a Hello World program in Kivy –

Step 1: Open any text editor (Notepad or Notepad++)

Step 2: Write the following code on the Editor.

Step 3: Save the file with .py extension for example tutoraspire.py

Step 4: Open the Anaconda Prompt and provide the valid path where your kivy program is saved.

Step 5: To run program, use the flowing command and press Enter.

When you run the command following output appears on the screen.

Kivy Tutorial


Add image widget in Kivy

Kivy image widget uses kivy.uix.image module to display image. There are the following two ways to add images in Kivy.

From System

From system, image widget is used to load images from the system.

The below code is used to add an image widget in Kivy.

When we run code, the following output will appear on the screen.

Kivy Tutorial

Asynchronous Loading

The asynchronous loading e image widget is used to load images from the external web server.

We can use the following code to add an image from the external web server.

The below screenshot shows that an image is added from the external web server.

Kivy Tutorial


Kivy Buttons

Buttons are an essential part of every application. It performs some specific tasks when we click on the button. The main advantage of a button is that it allows users to interact with the software and application directly.

To create a button in Kivy, we need to import Button form kivy.uix.button.

Output:

Kivy Tutorial

Create a stylish button

In Kivy, we can also design a stylish button using various different background colors, size_hint, and pos.

The below screenshot shows the output of a stylish button.

Kivy Tutorial

Add an image in the button

Kivy allows us to add an image in the button to make the button more effective and attractive.

To add an image in the button, we need to import the following module:

Code:

Output:

Kivy Tutorial


Kivy Widgets

Kivy Widgets are used to develop GUI interfaces in kivy. Kivy widgets allow us to create Labels, Canvas, drop-down menu, and more.

1. Label Widgets

Label widget is used for rendering the text. To make labels more attractive, we can add font size, color, and text color in the label.

To create label, we need to import from kivy.uix.label import Label module.

Code:

Output: The below screenshot shows the output of the label.

Kivy Tutorial

3. Checkbox

Checkbox is also referred to as a selection box, tick box, and checkmark. It is used in the forms to make forms options easier to read and answer.

Code:

The below screenshot shows the output of checkbox:

Kivy Tutorial

Slider

Slider is used to handle a specific numeric value within a range (minimum to maximum values). Mostly, Sliders are used in mobile phones to increase and decrease the volume as well as the brightness of the mobile phone.

To create the slider, first, we have to import from kivy.uix.slider import Slider Module.

In Kivy, we use the below code to create the Range Slider:

Code:

The below screenshot shows the output of the slider.

Kivy Tutorial

Note: Kivy also supports normalized slider, which contains minimum value 0 and maximum value 1.

Switch Widget

Switch widget contains only two states (On or OFF).

To create a Switch widget, we need to import from kivy.uix.switch import Switch module.

Code:

Output: The below screenshot shows the output of the Switch Widget.

Kivy Tutorial

Progress Bar

Progress Bar in one of the most important graphical control element, which is used to analyze the progress of operation such as downloading progress, file transfer progress, loading app, saving updates, and installation progress.

To create a progress bar, fist import the below module:

from kivy.uix.progressbar import ProgressBar

Output:

Kivy Tutorial

When we click on the Start, the below progress bar appears on the screen.

Kivy Tutorial


Kivy Layouts

Layout is the most important term in graphics design. It is used to arrange elements for a better look.

There are the following different types of layout that we generally use in the Kivy.

1. GridLayout

GridLayout is designed to arrange the components in the form of a rectangular grid. In GridLayout, every rectangular grid is exactly the same in size.

To create Grid layout in Kivy, first, we need to import the following GridLayout module –

Implement Grid Layout:

The below screenshot shows the output of the Grid Layout.

Kivy Tutorial

2. BoxLayout

BoxLayout is used to arrange the component based on the axis’s [along X-axis (horizontally) and along Y-axis (Vertically)].

To import BoxLayout, we need to import BoxLayout using below module:

Implement Box Layout:

The below screenshot shows the output of the Box Layout:

Kivy Tutorial

3. FloatLayout

FloatLayout is used to place element according to the size of the current window (in terms of height and width of window).

FloatLayout contains pos_hint and size_hint, which are the properties of its children.

Note 1: FloatLayout is mostly used in the Mobile Applications.

Note 2: By default, size_hint is (1,1) for all widgets.

To create FloatLayout, we need to import the below module:

Implement FloatLayout:

The below screenshot shows the output of the FloatLayout:

Kivy Tutorial

4. AnchorLayout

AnchorLayout is used to align the border top, bottom, left, right, or center.

AnchorLayout is initialized using the below parameters:

  • anchor_x = (Parameter can be passed: “left”, “right”, and “center”)
  • anchor_y = (Parameter can be passed: “top”, “bottom”, and “center”)

We can implement Anchor Layout using the following module:

The below code is used to create AnchorLayout.

Output:

Kivy Tutorial

5. StackLayout

StackLayout helps us to arrange buttons vertically and horizontally. In StackLayout, it is not compulsory that the sizes of all buttons are the same, so we can arrange buttons according to our requirement.

To create StackLayout, we need to import the below module:

Code:

The output of the StackLayout is shown below:

Kivy Tutorial


Popup window is a type of window that suddenly pops up on the screen. Generally, a popup window appears to users when they visit a page or closes a window.

In Kivy, we create a popup window using the below code:

Output:

The below screenshot shows the output of popup window –

Kivy Tutorial

When we click on the popup window, the following screen appears on the screen.

Kivy Tutorial


Create a Sign in Window in Kivy

Now, we are going to create a simple sign in page using Kivy. To create a sign in page in kivy, we need to create the following two files –

  1. .py file – .py file is a script file which is written in Python. It can be created in any text editor but requires a Python interpreter to run.
  2. .kv file – .kv file is same as css file in the HTML.

Note: Here, we are using .kv file to create Sign in window.

.py file

.kv file

When we run the code, the following window appears on the screen.

Kivy Tutorial

Case1: If the username and the password are empty, then the following screen appears on the screen.

Kivy Tutorial

Case 2: If we enter an invalid username and password, the following screen appears on the screen.

Kivy Tutorial

Case 3: If we enter username admin and password is admin then the following screen appears on the screen

Kivy Tutorial

Prerequisite

Before learning Kivy, you must have the fundamental knowledge of Python so that you can understand the Kivy concepts easily.

Audience

Our Kivy tutorial is designed for beginners and working professionals.

Problem

We assure you that you will not find any difficulty while learning our Kivy tutorial. Buts if there any mistake, kindly posts the problem in the contact form.


You may also like