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
- Features of Kivy
- Advantages & Disadvantages of Kivy
- Kivy Architecture
- Kivy Installation on Windows
- Create a Hello World program in Kivy
- Add image in Kivy
- Kivy Buttons
- Kivy Widgets
- Kivy Layouts
- Create popup window in Kivy
- Crete Sign in Window in Kivy
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 –
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.
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.
Advantages and Disadvantages of Kivy
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.
- 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.
The below screenshot shows the Kivy Architecture –
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.
Kivy Graphics APIs have the ability to automatically optimize the drawing commands.
Core provides the following features –
A clock is used to schedule the timer events. Clock supported both one-shot timers and periodic timers.
In Kivy, the cache is used to store python objects. We can control the cache in the following two ways –
- Object limit
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.
In Kivy, properties classes are used to link our widget code to the user interface description.
The UIX module commonly contains Widgets and Layouts to quickly create a user interface.
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 are used to arrange widgets.
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.
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.
Step 3: Select the Python Releases version for windows.
Step 4: Double click on the downloaded file, the below window appears on the screen in which click on Install Now.
Step 5: The below screenshot shows that Python installation is in progress.
Step 6: The below screenshot shows that the setup is installed successfully. You just simply click on the Close button.
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.
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.
Step 4: A License Agreement window appears on the screen, in which click on the I Agree.
Step 5: In Installer type, select Install for Just Me (recommended).
Step 6: Browse the location where you want to install Anaconda and click on the Next.
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.
Step 8: The below screenshot shows that Anaconda Installation is in progress.
Step 9: Once the Installation process is completed, click on the Next button.
Step 10: The following window appears on the screen in which click on the Next.
Step 11: A completing Anaconda set up window appears on the screen, simply click on the Finish on that window.
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.
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, 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.
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.
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.
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.
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:
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.
Output: The below screenshot shows the output of the label.
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.
The below screenshot shows the output of checkbox:
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:
The below screenshot shows the output of the slider.
Note: Kivy also supports normalized slider, which contains minimum value 0 and maximum value 1.
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.
Output: The below screenshot shows the output of the Switch Widget.
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
When we click on the Start, the below progress bar appears on the screen.
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.
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.
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:
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:
The below screenshot shows the output of the FloatLayout:
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.
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:
The output of the StackLayout is shown below:
Create a Popup Window in Kivy
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:
The below screenshot shows the output of popup window –
When we click on the popup window, the following screen appears on the screen.
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 –
- .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.
- .kv file – .kv file is same as css file in the HTML.
Note: Here, we are using .kv file to create Sign in window.
When we run the code, the following window appears on the screen.
Case1: If the username and the password are empty, then the following screen appears on the screen.
Case 2: If we enter an invalid username and password, the following screen appears on the screen.
Case 3: If we enter username admin and password is admin then the following screen appears on the screen
Before learning Kivy, you must have the fundamental knowledge of Python so that you can understand the Kivy concepts easily.
Our Kivy tutorial is designed for beginners and working professionals.
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.