Tabs For Kivy – Python Kivy GUI Tutorial #34

In this video I’ll show you how to add tabs to your Kivy app.

Tabs are a really common design element in Graphical User Interfaces and Kivy makes using them really easy. In this video I’ll show you how to add tabs to your app, how to put things in the tabs, how to size the tabs, and how to position the tabs themselves (on top, bottom, left, or right).

Tabs are a great way to break apart the different elements of your GUI, and Kivy makes it pretty easy to use them.

Python Code: tabs.py
GitHub Code: tabs.py

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivy.uix.tabbedpanel import TabbedPanel


# Designate Our .kv design file 
Builder.load_file('tabs.kv')

class MyLayout(TabbedPanel):
	pass

class AwesomeApp(App):
	def build(self):
		return MyLayout()

if __name__ == '__main__':
	AwesomeApp().run()

Kivy Design Code: tabs.kv
GitHub Code: tabs.kv

<MyLayout>
	do_default_tab: False

	size_hint: .5, .5
	pos_hint: {'center_x': .5, 'center_y': .5}

        # ft_top, left_mid, left_bottom, top_left, 
        # top_mid, top_right, right_top, right_mid, 
        # right_bottom, bottom_left, bottom_mid, 
        # bottom_right.
    
	tab_pos: 'left_top'

	TabbedPanelItem:
		text: "Tab 1"
		Label:
			text: "Hello World!"

	TabbedPanelItem:
		text: "Tab 2"
		BoxLayout:
			Label:
				text: "Press The Button =>"
			Button:
				text: "Click Me!!"

	TabbedPanelItem:
		text: "Tab 3"

		Image:
			source: "images/aspen1.jpg"