Table of contents
1.
Introduction
2.
Image Widget
2.1.
Synchronous Loading
2.1.1.
 
2.1.2.
Output
2.2.
Asynchronous Loading
2.2.1.
Output
2.2.2.
Output
3.
FAQs
3.1.
What is widget in python kivy?
3.2.
What is the float layout in Kivy?
3.3.
What is the difference between GridLayout and stacklayout?
3.4.
What is the relative layout in Kivy?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

Adding Image Widget in Kivy

Author SHIVANGI MALL
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Kivy is a multi-platform Python GUI development library that runs on iOS, Android, Windows, OS X, and GNU/Linux. It aids in the development of apps that make use of cutting-edge multi-touch user interfaces. Kivy's core concept allows developers to create an app once and deploy it across all devices, making code reusable and deployable and enabling quick and easy interaction design and prototyping.

Image Widget

The kivy image widget displays images using the kivy.uix.image module. To use the image   widget, we need to import:

from kivy.uix.image import Image, AsyncImage
You can also try this code with Online Python Compiler
Run Code

Because the module kivy.uix.image contains all image-related functionality. 

In Kivy, there are two methods for adding photos.

Synchronous Loading

In synchronous loading, an image widget is used to load images from the system. Image

must be in the folder in which the .py file is saved.

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

# to import kivy module
import kivy
from kivy.app import App
from kivy.uix.image import Image
 
 
# Create a class MyKivy  
class MyKivy(App):
    def build(self):
 
        #return an Image as a root widget
        return Image(source = "messi.jpg")
       
 
if __name__ == "__main__":
    window = MyKivy()
    # Class MyKivy is initialized and run () method is called to run the App.
    window.run()
You can also try this code with Online Python Compiler
Run Code

 

Output

Asynchronous Loading

Images are loaded from an external web server using the asynchronous loading image widget

To add an image from an external web server, we can use the code below.

 

# to import kivy module
import kivy
from kivy.app import App
from kivy.uix.image import AsyncImage
 
 
# Create a class MyKivy
class MyKivy(App):
    # defining build()
    def build(self):
 
 
        img = AsyncImage(source = "https://kivy.org/logos/kivy-logo-black-64.png")
        return img
 
 
 
 if __name__ == "__main__":
    window = MyKivy()
    # Class MyKivy is initialized and run () method is called to run the App.
    window.run()
You can also try this code with Online Python Compiler
Run Code

Output


Now that you've considered how to change the image's size, location, and other attributes, the following code will illustrate how to do so:

# to import kivy module  
import kivy 
from kivy.app import App
 
# used to restrict the kivy version i.e
# below this kivy version we cannot
# use the app or software
kivy.require('1.9.0')
 
# we use image widget is used to display an image
from kivy.uix.image import Image
from kivy.uix.widget import Widget
 
# we use this module config to change the kivy default settings 
from kivy.config import Config
   
# 0 being considered as off 1 being on as in true / false
# we can use 0 or 1 && True or False
Config.set('graphics', 'resizable', True)
   
 
# creating the App class
class MyKivy(App):
 
    # defining build()
     
    def build(self):
         
        # loading image
        self.img = Image(source ='messi.jpg')
 
        # By default, the image is centered and fits
        self.img.allow_stretch = True
        self.img.keep_ratio = False
 
        # Providing Size to the image
        # it varies from 0 to 1
        self.img.size_hint_x = 1
        self.img.size_hint_y = 1
 
        # Position set
        self.img.pos = (200, 100)
 
        # Opacity used to adjust the fadeness of the image
   
        self.img.opacity = 1
       
        # adding image to widget
        s = Widget()
        s.add_widget(self.img)
 
        # return widget
        return s
 
# run the app
MyKivy().run()
You can also try this code with Online Python Compiler
Run Code

Output

FAQs

What is widget in python kivy?

In Kivy, a Widget is the fundamental component of a GUI interface. It comes with a Canvas that you may use to draw on the screen. It receives and responds to events.

Kivy's widgets are arranged in a tree. Your program has a root widget, which normally has children who can have their own children. The children attribute, a Kivy ListProperty, is used to represent the children of a widget.

 

What is the float layout in Kivy?

Float layout groups widgets with proportional coordinates with the size_hint and pos_hint attributes. The values are numbers ranging from 0 to 1, showing a proportional relationship to the window size.

 

What is the difference between GridLayout and stacklayout?

GridLayout: Grid Layout creates a grid of widgets. To determine the size of the elements and how to arrange them, you must supply at least one grid dimension.

StackLayout: StackLayout places widgets next to each other, but with a fixed size in one of the dimensions, rather than attempting to fit them all into the available space.

 

What is the relative layout in Kivy?

We can use relative layout to set relative coordinates for children. Use the FloatLayout if you want absolute placement. The RelativeLayout class is similar to the FloatLayout class, except that its child widgets are positioned relative to the layout. 

This layout works similarly to FloatLayout, with the exception that the positioning properties (pos, x, center x, right, y, center y, and top) are related to the Layout size rather than the window size.

Conclusion

In this article, we have extensively discussed how to add image widget in kivy.

We hope that this blog has aided you in broadening your horizons. If you would like to learn more, check out our articles on Image SamplingModules & Packages in Python, and Best Python Projects. 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!

Live masterclass