Build An Image Swiper App For KivyMD in Python

In this article, we are going to see how to create the Swiper using KivyMD in Python.

KivyMD is a collection of Material Design compliant widgets which can be used with Kivy. It is a GUI framework for mobile applications. It is similar to kivy adding more attractive GUI.

MDSwiper is the touch slider for media files. It is mostly used to swipe images and videos in mobile applications.

Introduction:

In this article, we are going to make a simple swiper using the Python library KivyMD. We will be going to understand how to create swiper using KivyMD by two examples. In the first example we are going to create a simple swiper using one image in which we can swipe that image right or left using our mouse cursor. In the second example we are going to use more than one images in which we can swipe from one image to another with the help of mouse cursor.

Media files used:

img1.png

img.png

img2.png

Installation:

To install the modules type the below command in the command prompt.

pip install kivy

pip install kivymd

Example 1:Using a single image.

Step 1: Import required packages.

# importing packages
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window

Step 2: Adjust window size.

To adjust window size we pass width and height to window.size as done below.

Syntax:

window.size = (width:int,height:int)

# adjusting window size
Window.size = (800, 700)

Step 3: Design layout.

We will be designing our layout using the kv language.

In our kv language, MDScreen will be the parent widget whereas MDToolbar and MDSwiper will be sub-widgets for MDScreen. MDSwiperItem will be a sub-widget for MDSwiper.

Before we design our screen layout I would like to define an image for swiper at first and use it later.

Note: Variable name first alphabet must be capital in kv language.

Syntax to do so:

<Variablename@MDSwiperItem>

FitImage:
    source:”source of image inside double quotes”

     radius:[int, int]

We will pass the source and radius to FitImage. The source is used to load media files and the radius is used to make media files corner rounded.

Keeping MDSwiper blank will add default parameters that suit well.

Syntax:

MDScreen:

MDSwiper:

MDSwiperItem:

# writing kv language
kv = '''

# defining MDSwiperItem and storing it as swiper
# so that we can use it again and 
# again without passing same parameters evertime.
<Swiper@MDSwiperItem>
    
    # loads image
    FitImage:
        source: "img1.png"
        radius: [10,]

# creating screen 
MDScreen:

    # defining MDSwiper 
    MDSwiper:

        # calling MDSwiperItems
        Swiper:

        Swiper:

        Swiper:

'''

Step 4: Writing main program.

To run kv file we will be using load_string() and pass our kv language in it. So we will define a function for this named build() and on-call it will load kv and return the screen. 

Run() is used to run the class and it does not require any parameters.

# app class
class Main(MDApp):
  
    def build(self):
        # this will load kv language 
        screen = Builder.load_string(kv)
        
        # returning screen
        return screen

      
# running app
Main().run()

Code:

Python3

# importing packages
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window

# adjusting window size
Window.size = (800, 700)

# writing kv language
kv = '''

# defining MDSwiperItem and storing it as swiper
# so that we can use it again and again without passing same parameters evertime.
<swiper@MDSwiperItem>

    # loads image
    FitImage:
        source: "img1.png"
        radius: [20,]

# creating screen
MDScreen:

    # defining MDSwiper
    MDSwiper:

        # calling MDSwiperItems
        MDSwiperItem:
            FitImage:
                source:"img.png"
                radius: [20,0]

'''

# app class


class Main(MDApp):

    def build(self):
        # this will load kv language
        screen = Builder.load_string(kv)

        # returning screen
        return screen


# running app
Main().run()

Output:

Example 2: Using Multiple images.

In the first example we made MDSwiper by using one MDSwiperItem with a single image file. Now we will be using different images for every MDSwiperItem.

All the steps and parameters will remain same as used in first example. We just need to change kv language syntax for this example.

In step 3 of First example we defined MDSwiperItem in the beginning of kv language and stored it in Swiper but in this case we will not be doing the same. We will be passing different image files to MDSwiperItem in last.

Code:

Python3

# importing packages
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window

# adjusting window size
Window.size = (800, 700)

# writing kv language
kv = '''

# creating screen
MDScreen:

    # defining MDSwiper
    MDSwiper:

        # defining items for swiper
        MDSwiperItem:
            FitImage:
                source:"img.png"
                radius: [20,0]

        # defining items for swiper
        MDSwiperItem:
            FitImage:
                source:"img1.png"
                radius: [20,0]

         # defining items for swiper
        MDSwiperItem:
            FitImage:
                source:"img2.png"
                radius: [20,0]
'''

# app class


class Main(MDApp):

    def build(self):
        # this will load kv language
        screen = Builder.load_string(kv)

        # returning screen
        return screen


# running app
Main().run()

Output: