Adding Image Widget in Kivy

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