Python | Adding an image to Kivy using a .kv file

Kivy — it is a platform independent GUI tool in Python. Since it can run on Android, IOS, Linux, Windows, etc. It is mainly used to develop Android application, but that does not mean that it cannot be used in desktop applications.

Image Widget:

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

from kivy.uix.image import Image, AsyncImage (not necessary while working with .kv file)

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

Images can be loaded into the application two types:

1) Synchronous Loading: Loading image from the system (must be from the folder in which .py and .kv file is saved)
2) Asynchronous Loading: To load an image asynchronously (for example from an external webserver)

Note. By default, the image is centered and is placed in the bounding rectangle of the widget. If you don`t want this, 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) import BoxLayout 5) set minimum version (optional) 6) Create the Layout class 7) Create App class 8) Create .kv file: 1) Add BoxLayout 2) Add Label 3) Add Image 4) Resizing, Positioning etc of Image 9) return instance of the layout class 10) Run an instance of the class 

So in the below code we will explain how to load synchronous and asynchronous images ... See also How to Resize, Positioning, Label, etc. Image with some other things.

.py file —

## Sample Python application demonstrating
## working with images in Kivy using a. kv

 
############## ####################################
# import kivy module

import kivy 

 
# Your application base class inherits from the application class.
# app: always refers to your application instance

from kivy.app import App 

  
# this limits the kivy version i.e.
# below this version you cannot
# use application or software

kivy.require ( `1.9.0`

  
# BoxLayout puts kids in a vertical or horizontal border.
# or help put kids in the right place.

from kivy.uix.boxlayout import BoxLayout

 
# to change kivy settings by by default we use this module config

from kivy.config import Config

 
# 0 disabled 1 enabled as true / false
# You can use 0 or 1 & amp; & amp; True or False

Config. set ( `graphics` , ` resizable` , True )

 
# create the root widget used in the .kv file

class Imagekv (BoxLayout):

"" "

no need to do anything here like

we build things in a .kv file

  "" "

  pass

 
# class where the name of the .kv file should be named My.kv.

class MyApp (App):

# define the build () function

def build ( self ):

# return an instance of the Imagekv class

return Imagekv ()

 
# launch application

if __ name__ = = `__main__` :

MyApp (). run ( )

Implementation of the .kv file

# How to use kiw images with .kv

 
# root widget from Imagekv Calss
& lt; Imagekv & gt ;:

 

# Provide spelling in Box Layout

  orientation: ` vertical`

 
####################### #########################

 

# Adding a Lightbox box

BoxLayout:

 

  padding: 5

  

# Add image from system

Image:

source: `download.jpg`

  

# Provide image size

size_hint_x: 0.4

  

# enable image sterilization

allow_stretch: True

 

# Tagging images

  Label:

text: "Python"

font_size: 11

bold: True

  

  Label:

text: "Programing Language"

font_size: 10

 
######### #####################################

 

# Draw a line between multiples

Label:

canvas.before:

Color: 

rgba: ( 1 , 1 , 1 , 1 )

Rectangle:

  size: self . size

pos: self .pos

size_hint_y: None

height: 1

 
################## ################################

  

# Another box layout

  BoxLayout:

padding: 5

  Image:

source: "downloadimg .jpg "

  size_hint_x: 0.4

allow_stretch: True

 

Label :

text: "Image"

font_size: 11

bold: True

  

Label:

  text: " Python Image "

  font_size: 10

  
################################# #############

 

# Draw a line between multiples

  Label:

canvas.before:

Color: 

rgba: ( 1 , 1 , 1 , 1 )

Rectangle:

size: self . size

  pos : self . pos

size_hint_y: None

height: 1

 
######################################### #####

 

# Add the following block layout

  BoxLayout:

padding: 5

 

# Load image asynchronously

# (for example, from an external web server)

AsyncImage:

source: ` http://kivy.org/logos/kivy-logo-black-64.png `

  width: 100

  allow_stretch: True

  

Label:

  text: "Asynchronous Image"

  font_size: 11

bold: True

 

Label:

text: "Kivy Logo"

font_size: 10

 
#### ###################################################### ##

 

# Draw a line between multiples

Label:

canvas.before:

Color: 

rgba: ( 1 , 1 , 1 , 1 )

Rectangle:

size: self . size

pos: self .pos

size_hint_y: None

height: 1

 
################### ################################ ###

 

# LAst Box Layout

BoxLayout:

padding: 5

 

AsyncImage:

size_hint_y: None

source: ` http://kivy.org/slides/kivypictures-thumb.jpg `

width: 100

allow_stretch: True

 

Label:

text: "Asynchronous Image"

font_size: 11

  bold: True

 

Label:

text: "Webserver image"

font_size: 10

Output: