Image Widget
Kivy has several widgets to carry out different functions. It has the Image widget to display an image in the application.
- We use the kivy.uix.image module to import the image widget; because the module kivy.uix.image contains all image-related functionality.
- There are two ways to load images into the application:
1) Synchronous Loading: Image loading from the system (must be from the folder in which .py and .kv file is saved)
2) Asynchronous Image Loading: Asynchronous image loading (for example, from an external webserver)
We'll look at how to use the Image widget in Kivy and implement it using the “.kv” file.
Implementation using kv file
The basic steps involved in adding images to a kivy application are as follows:
- Step 1: Import required libraries such as kivyApp, Image, BoxLayout
- Step 2: Create the Layout and App Class.
- Step 3: Create a “.kv” file by adding the BoxLayout, Label, and Image.
- Step 4: Run an instance of the class.
We'll show you how to load synchronous and asynchronous photos in the code below. We will also see how to resize, position, label, and other aspects of the image.
The py file
Now, let’s see the python file of the implementation of the image widget in Kivy. Here, we have imported all the required modules for this program and then created a class “Imagekivy” that will be used as a class label in the “.kv” file.
Here in this program, we have divided the program into two parts. The first one is the python code that we use to create the main application, and the .kv file to design the box layout and the image properties.
Important points to consider:
- You must add the “.kv” file in the same directory as this file.
- The name of the “.kv” file must be the same as the name of the “.py” file. For example, you have to create two files named “myapp.py” and “myapp.kv” in the same directory.
#program to display image in kivy using .kv file
#importing kivy modules required for this program
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
#class for image display from kv file
class Imagekivy(BoxLayout):
pass
#class for app
#remember to add .kv file in same directory as this file
#also remember to give same name as this file with .kv extension
class MyApp(App):
def build(self):
return Imagekivy()
#run app
if __name__ == '__main__':
MyApp().run()
You can also try this code with Online Python Compiler
The kv file
The “.kv” file must be in the same directory as the python file. It contains the details about the box layout and the image file. You must specify the source of the image in this file to be able to display the image in the application window.
<Imagekivy>:
#creating box layout for the image
BoxLayout:
#setting the source of the image
Image:
source: 'images/kivy.png'
allow_stretch: True
#using label to display some text along with the image
Label:
text:"Kivy Toolkit"
font_size:11
bold:True
You can also try this code with Online Python Compiler
Output
The output displays the kivy logo image and the text “Kivy Toolkit” in the right.
Frequently Asked Questions
What is KV in Kivy?
A KV file is a Kivy language file created by Kivy, an open-source Python library for developing cross-platform multi-touch apps. It keeps source code in Kivy syntax, which could include rule definitions, a root widget, dynamic class definitions, and templates.
What is a Python object property?
In Python, the property() function allows access to instance attributes. Like Java and C#, it encapsulates instance characteristics and gives a property. The get, set, and delete methods are passed as arguments to the property() method, which returns a property class object.
What makes Kivy and KivyMD different?
Kivy is an open-source, cross-platform Python framework for creating multi-touch apps. KivyMD is a set of Kivy-compatible Material Design widgets.
Is Kivy still used?
New Kivy versions are being launched, and new widgets for the Kivy garden. This demonstrates that Kivy is still alive.
Conclusion
In this article, we have extensively discussed the basics of the Kivy library of python and how to add an image widget in a kivy application. We have discussed the basic concepts of the image widget in kivy and its implementation using python and the “kv” file of the kivy language.
We hope that this blog has helped you enhance your knowledge regarding the BoxLayout widget in kivy and if you would like to learn more, check out our articles on the Kivy float layout,’ ‘Dropdown list in Kivy,’ ‘Image Sampling,’ ‘Button action in kivy,’ ‘Button colour in kivy.’ Do upvote our blog to help other ninjas grow.
Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more.!
Happy Reading!
34+ registered 
