Multiple UX Widgets in Kivy

Implementation Approach

The basic approach we are following here to see the implementation of the various UX widgets is as follows:

Step 1: import libraries, classes and layouts required (in this case, kivy, kivyApp, window)

Step 2: create the required class (in this case, App class)

Step 3: create the .kv file consisting of the multiple UX widgets and their description

Step 4: return the layout/widget/class (in this case, layout)

Step 5: run the instance of the class (in this case, WidgetApp())

Implementation Code

Now, let's see the implementation code for the various UX widgets provided by Kivy.

.py file

# Tabbed Panel Widget Implementation

import kivy
from kivy.app import App

# restrict the kivy version(optional)
kivy.require('1.9.0')

# provides colour to the background
from kivy.core.window import Window
 
# set the window size
Window.size = (1120, 630)
 
# Add the App class
class WigdetApp(App):
    def build(FloatLayout):
        pass
 
# Run the App
if __name__ == '__main__':
    WigdetApp().run()

.kv file

# .kv file implementation of the App

# Using a Grid layout
GridLayout:

	cols: 3
	rows: 3
	padding: 20

	# 1. Label
	Label:
		text: "I am a Label."

	# 2. Button
	Button:
		text: "I am a Button. Click me!"

	# 3. CheckBox
	CheckBox:
		active: True

	# 4. Image
	Image:
		source: 'logo.png'

	# 5. Slider
	Slider:
		min: -100
		max: 100
		value: 45

	# 6. Progress Bar
	ProgressBar:
		min: 25
		max: 100
		value: 70

	# 7. TextInput
	TextInput:
		text: "Enter text here: "

	# 8. Toggle Button
	ToggleButton:
		text: "I am Toggle Button."

	# 9. Switch
	Switch:
		active: True

Code Explanation

In the .py file, we first import the required libraries, classes and layouts; then, we create the required class. We also check if the version of kivy is below the one we need or not, though this is entirely optional. In the end, we run our instance of the class.

In the .kv file, we first apply the grid layout and set the rows and columns to three. Thus, we get a 3x3 grid to insert nine widgets into. We add a label, button, check box, image, slider, progress bar, text input, a toggle button and switch in the grid. We also define the various properties of these widgets.

Output Image 1

Output Image 2

Frequently Asked Questions

What does Kivy architecture consist of?

The Kivy Architecture is made up of the following elements:
→ Core Providers And Input Providers
→ Graphics
→ Core
→ UIX
→ Modules
→ Input Events
→ Widgets And Input Dispatching

What are the different widgets provided by Kivy?

The widgets in Kivy can be classed as UX Widgets, Layouts, Complex UX Widgets, Behaviour Widgets and Screen Manager.

What is a .kv file?

A .kv file is a Kivy language file created by Python Kivy.

What is a grid layout?

The Grid Layout produces and arranges the children in a matrix structure. It divides the available area (square) into rows and columns; and then assigns the widgets to the resulting cells or grids as needed.

Conclusion

In this article, we learned what the multiple UX widgets in Kivy are. We also saw the steps to be taken to implement them. We followed the steps and implemented various UX widgets using .py and .kv files.

We hope this blog has helped you enhance your knowledge. If you want to learn more, check out our articles on Introduction to Kivy - Coding Ninjas Coding Ninjas Studio, Multiple Layout - Coding Ninjas Coding Ninjas Studio, The drop-down List In Kivy - Coding Ninjas Coding Ninjas Studio and Text Input with a button - Coding Ninjas Coding Ninjas Studio. Do upvote our blog to help other ninjas grow.

Head over to our practice platform Coding Ninjas Studio to practice top problems, follow guided paths, attempt mock tests, read interview experiences, interview bundle, solve problems, participate in contests and much more!

Happy Reading!