Python | Add image widget in Kivy

Kivy is a platform independent GUI tool in Python. As it can be run on Android, IOS, linux and Windows etc. It is basically used to develop the Android application, but it does not mean that it can not be used on Desktops applications.

Image Widget:

The Image widget is used to display an image. To use the image widget you must have to import :

from kivy.uix.image import Image, AsyncImage

because the module kivy.uix.image have all the functionality related to images.

Images can be loaded to the Application via two types:

1) From system :
wimg = Image(source='mylogo.png')

2) Asynchronous Loading:
To load an image asynchronously (for example from an external webserver), use the AsyncImage subclass:
aimg = AsyncImage(source='http://mywebsite.com/logo.png')

Note: By default, the image is centered and fits inside the widget bounding box. If you don’t want that, you can set allow_stretch to True and keep_ratio to False.

Basic Approach to create multiple layout in one file:
1) import kivy
2) import kivyApp
3) import image
4) set minimum version(optional)
5) create App class
6) return Image/layout/widget
7) Run an instance of the class

Below is the code how can you use the images in your code:

Code #1:
Simple image from the system (must be in the folder in which the .py file is saved)

filter_none

edit
close

play_arrow

link
brightness_4
code

# Program to explain how to add image in kivy
  
# import kivy module   
import kivy 
    
# base Class of your App inherits from the App class.   
# app:always refers to the instance of your application  
from kivy.app import App
  
# this restrict the kivy version i.e 
# below this kivy version you cannot 
# use the app or software 
kivy.require('1.9.0')
  
# The Image widget is used to display an image
# this module contain all features of images
from kivy.uix.image import Image
  
# creating the App class
class MyApp(App):
  
    # defining build()
      
    def build(self):
          
        # return image
        return Image(source ='download.jpg')
  
# run the App
MyApp().run()

chevron_right


Output:

 
Code #2:

How can we add AsyncImage i.e. from the webserver(external)

filter_none

edit
close

play_arrow

link
brightness_4
code

# Simple program to show how we add AsyncImage in kivy App
  
# import kivy module   
import kivy 
    
# base Class of your App inherits from the App class.   
# app:always refers to the instance of your application  
from kivy.app import App
  
# this restrict the kivy version i.e 
# below this kivy version you cannot 
# use the app or software 
kivy.require('1.9.0')
  
# The Image widget is used to display an image
# this module contains all features of images
from kivy.uix.image import AsyncImage
  
  
# creating the App class
class MyApp(App):
  
    # defining build()
      
    def build(self):
          
        # return image
        return AsyncImage(source ='http://kivy.org/logos/kivy-logo-black-64.png')
  
# run the App
MyApp().run()

chevron_right


Output:

Now one thing came in mind how can you change size, position, etc of the image the below code will explain that also:

Code #3:

filter_none

edit
close

play_arrow

link
brightness_4
code

# Program to Show how to use images in kivy
  
# import kivy module   
import kivy 
    
# base Class of your App inherits from the App class.   
# app:always refers to the instance of your application  
from kivy.app import App
  
# this restrict the kivy version i.e 
# below this kivy version you cannot 
# use the app or software 
kivy.require('1.9.0')
  
# The Image widget is used to display an image
# this module contain all features of images
from kivy.uix.image import Image
  
# The Widget class is the base class required for creating Widgets
from kivy.uix.widget import Widget
  
# to change the kivy default settings we use this module config
from kivy.config import Config
   
# 0 being off 1 being on as in true / false
# you can use 0 or 1 && True or False
Config.set('graphics', 'resizable', True)
   
  
# creating the App class
class MyApp(App):
  
    # defining build()
      
    def build(self):
          
        # loading image
        self.img = Image(source ='download.jpg')
  
        # By default, the image is centered and fits
        # inside the widget bounding box.
        # If you don’t want that,
        # you can set allow_stretch to
        # True and keep_ratio to False.
        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 adjust the fadeness of the image if
        # 0 then it is complete black
        # 1 then original
        # it varies from 0 to 1
        self.img.opacity = 1
          
  
        # adding image to widget
        s = Widget()
        s.add_widget(self.img)
  
        # return widget
        return s
  
# run the app
MyApp().run()

chevron_right


Output:



My Personal Notes arrow_drop_up

Competative Programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.