- Kivy Tutorial
- Kivy - Home
- Kivy Basics
- Kivy - Getting Started
- Kivy - Installation
- Kivy - Architecture
- Kivy - File Syntax
- Kivy - Applications
- Kivy - Hello World
- Kivy - App Life Cycle
- Kivy - Events
- Kivy - Properties
- Kivy - Inputs
- Kivy - Behaviors
- Kivy Buttons
- Kivy - Buttons
- Kivy - Button Events
- Kivy - Button Colors
- Kivy - Button Size
- Kivy - Button Position
- Kivy - Round Buttons
- Kivy - Disabled Buttons
- Kivy - Image Button
- Kivy Widgets
- Kivy - Widgets
- Kivy - Label
- Kivy - Text Input
- Kivy - Canvas
- Kivy - Line
- Kivy - Checkbox
- Kivy - Dropdown List
- Kivy - Windows
- Kivy - ScrollView
- Kivy - Carousel
- Kivy - Slider
- Kivy - Images
- Kivy - Popup
- Kivy - Switch
- Kivy - Spinner
- Kivy - Splitter
- Kivy - Progress Bar
- Kivy - Bubble
- Kivy - Tabbed Panel
- Kivy - Scatter
- Kivy - Accordion
- Kivy - File Chooser
- Kivy - Color Picker
- Kivy - Code Input
- Kivy - Modal View
- Kivy - Toggle Button
- Kivy - Camera
- Kivy - Tree View
- Kivy - reStructuredText
- Kivy - Action Bar
- Kivy - Video Player
- Kivy - Stencil View
- Kivy - VKeyboard
- Kivy - Touch Ripple
- Kivy - Audio
- Kivy - Videos
- Kivy - Spelling
- Kivy - Effects
- Kivy - Input Recorder
- Kivy - OpenGL
- Kivy - Text
- Kivy - Text Markup
- Kivy - Settings
- Kivy Layouts
- Kivy - Layouts
- Kivy - Float Layout
- Kivy - Grid Layouts
- Kivy - Box Layouts
- Kivy - Stack Layout
- Kivy - Anchor Layout
- Kivy - Relative Layout
- Kivy - Page Layout
- Kivy - Recycle Layout
- Kivy - Layouts in Layouts
- Kivy Advanced Concepts
- Kivy - Configuration Object
- Kivy - Atlas
- Kivy - Data Loader
- Kivy - Cache Manager
- Kivy - Console
- Kivy - Animation
- Kivy - Multistroke
- Kivy - Clock
- Kivy - SVGs
- Kivy - UrlRequest
- Kivy - Clipboard
- Kivy - Factory
- Kivy - Gesture
- Kivy - Language
- Kivy - Graphics
- Kivy - Drawing
- Kivy - Packaging
- Kivy - Garden
- Kivy - Storage
- Kivy - Vector
- Kivy - Utils
- Kivy - Inspector
- Kivy - Tools
- Kivy - Logger
- Kivy - Framebuffer
- Kivy Applications and Projects
- Kivy - Drawing App
- Kivy - Calculator App
- Kivy - Stopwatch App
- Kivy - Camera Handling
- Kivy - Image Viewer
- Kivy - Bezier
- Kivy - Canvas Stress
- Kivy - Circle Drawing
- Kivy - Widget Animation
- Kivy - Miscellaneous
- Kivy Useful Resources
- Kivy - Quick Guide
- Kivy - Useful Resources
- Kivy - Discussion
Kivy - Image Button
The Kivy library doesn't have a ready-to-use image button widget. It does have a normal Button and a ToggleButton widget. You can of course use the image files as their background in the normal state or disabled state −
background_disabled_down − The background image of the button is a StringProperty, a string containing path to an image file and is used for the default graphical representation when the button is disabled and pressed.
background_disabled_normal − Background image of the button is also an image path, used for the default graphical representation when the button is disabled and not pressed.
background_down − Background image of the button used as the default graphical representation when the button is pressed.
background_normal − Background image of the button used as the default graphical representation when the button is not pressed.
For example, you can use −
B1 = Button(background_normal='images/play.png')
However, to make an image widget function as a clickable button, you need to dfine a custom class based on ButtonBehavior mixin and Image class and override the on_press() method.
ButtonBehavior
In Kivy, the "kivy.uix.behaviors" module defines behavior mixins, which are also called "reusable classes" that provide additional functionality to widgets.
To use of an image as a button, we define a custom class that extends the ButtonBehavior to make it respond to events like on_press or on_touch, so that the image itself can behave as a button.
We use Kivy's Image object to display an image on Kivy window. However, to add button-like behavior to it, we first define a custom class called "imgbtn" that extends the Image as well as the ButtonBehavior classes.
The source property of the Image class is assigned a string which is the path to the image file. We then override the on_press() method.
class imgbtn(ButtonBehavior, Image): def __init__(self, **kwargs): super(imgbtn, self).__init__(**kwargs) def on_press(self): print("Button pressed", self.source) ImgBtnApp.l1.text=self.source
Example
Let's implement this concept and put four images in the app layout and bind them to a callback. The class to provide button-like functionality to an image is first defined as below −
class imgbtn(ButtonBehavior, Image): def __init__(self, **kwargs): super(imgbtn, self).__init__(**kwargs) def on_press(self): ImgBtnApp.l1.text=self.source
We shall now use objects of this class on the application layout to display images and they will raise the on_press event. The source property of the clicked image will be displayed on the label as its text.
from kivy.app import App from kivy.graphics import * from kivy.uix.floatlayout import FloatLayout from kivy.uix.gridlayout import GridLayout from kivy.uix.button import Button from kivy.uix.label import Label from kivy.uix.image import Image from kivy.uix.behaviors import ButtonBehavior from kivy.core.window import Window Window.size = (720, 400) class imgbtn(ButtonBehavior, Image): def __init__(self, **kwargs): super(imgbtn, self).__init__(**kwargs) def on_press(self): print("Button pressed", self.source) ImgBtnApp.l1.text = self.source class ImgBtnApp(App): def build(self): main = GridLayout(cols=1) ImgBtnApp.l1 = Label(text='Hello', font_size=32) main.add_widget(ImgBtnApp.l1) root = FloatLayout(size=(Window.width, 100)) with root.canvas: Color(.2, .7, .1, 1) Rectangle(pos=root.pos, size=root.size) self.btn1 = imgbtn( source='previous.png', size_hint=(None, None), pos_hint={'center_x': .2, 'center_y': .25} ) self.btn2 = imgbtn( source='play.png', size_hint=(None, None), pos_hint={'center_x': .4, 'center_y': .25} ) self.btn3 = imgbtn( source='pause.png', size_hint=(None, None), pos_hint={'center_x': .6, 'center_y': .25} ) self.btn4 = imgbtn( source='stop.png', size_hint=(None, None), pos_hint={'center_x': .8, 'center_y': .25} ) root.add_widget(self.btn1) root.add_widget(self.btn2) root.add_widget(self.btn3) root.add_widget(self.btn4) main.add_widget(root) return main ImgBtnApp().run()
Output
Run the code and click each of the four buttons one by one.
To Continue Learning Please Login
Login with Google