Image Swiper App Tricks and Tips – Python Kivy GUI Tutorial #50

In this video we’ll learn more about the Image Swiper App from the last video with Kivy and Python.

I’ll show you how to change images in our swiper by clicking a button instead of swiping. I’ll also show you how to run custom functions whenever you swipe left or right in the app.

I’ll be building on what we built in the last video and showing you a few useful things that you can do with the Image Swiper.

#kivy #codemy

Python Code: swiper2.py
GitHub Code: swiper2.py

from kivy.lang import Builder
from kivymd.app import MDApp


class MainApp(MDApp):

	def build(self):
		self.theme_cls.theme_style = "Dark"
		self.theme_cls.primary_palette = "BlueGray"
		return Builder.load_file('swiper2.kv')
	# Swipe Left
	def on_swipe_left(self):
		self.root.ids.toolbar.title = "You Swiped Left!"
		#print("You Swiped Left!")

	# Swipe Right
	def on_swipe_right(self):
		self.root.ids.toolbar.title = "You Swiped Right!"
		#print("You Swiped Right!")	

MainApp().run()

Kivy Design Code: swiper2.kv
GitHub Code: swiper2.kv

<MySwiper@MDSwiperItem>
    
    #FitImage:
    #    source: "images/aspen.png"
    #    radius: [20,]

MDScreen:
    
    MDToolbar:
        id: toolbar
        title: "Our Swiper App"
        elevation: 10
        pos_hint: {"top": 1}

    MDSwiper:
        id: swiper
        size_hint_y: None
        height: root.height - toolbar.height - dp(40)
        y: root.height - self.height - toolbar.height - dp(20)

        on_swipe:
        on_pre_swipe:
        on_overswipe_right:
        on_overswipe_left:
        on_swipe_left: app.on_swipe_left()
        on_swipe_right: app.on_swipe_right()
        

        MySwiper:
            FitImage:
                source: "images/aspen.png"
                radius: [20,]
   
        MySwiper:
            FitImage:
                source: "images/aspen2.png"
                radius: [20,]
        
        MySwiper:
            FitImage:
                source: "images/aspen3.png"
                radius: [20,]
        
        MySwiper:
            FitImage:
                source: "images/aspen4.png"
                radius: [20,]

        MySwiper:
            FitImage:
                source: "images/me.png"
                radius: [20,]

    BoxLayout:
        orientation: "horizontal"

        MDRaisedButton:
            text: "Previous"
            on_release: if swiper.get_current_index() > 0: swiper.set_current(swiper.get_current_index()-1)

        MDRaisedButton:
            text: "Next"
            on_release: if swiper.get_current_index() < len(swiper.get_items())-1: swiper.set_current(swiper.get_current_index()+1)

            #len(swiper.get_items())