Learning Kivy: TabbedPanel

Hello everyone!

On May 13th, 2013 Kivy launched version 1.7.0 for it’s platform. The new version includes some cool features as well. You can have a look at the changelog from over here.

Today’s Kivy tutorial talks about one of the existing complex UX widgets called TabbedPanel. The TabbedPanel widget manages different widgets in tabs. It consists of a header area for the actual tab buttons and a content area for showing the current tab content. Before you begin implementing this widget you need to understand the concept of a TabbedPanelHeader.

What is a TabbedPanelHeader?

An individual tab is called a TabbedPanelHeader. It is a special button containing the content property. In order to use it, we need to first add the TabbedPanelHeader to our TabbedPanel and then set its content as seen below!

tp = TabbedPanel()
th = TabbedPanelHeader(text='Tab2')
tp.add_widget(th)
th.content = your_content_instance

Once you are clear with the concept of a TabbedPanelHeader, you can now go ahead and start implementing your own TabbedPanel widget. Fire up Python IDLE and begin writing the following code!

tabbedpanel.py

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.tabbedpanel import TabbedPanelHeader
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.image import Image

class TabbedPanelApp(App):
      def build(self):
          tb_panel= TabbedPanel()

          #Create text tab          
          th_text_head = TabbedPanelHeader(text='Text tab')
          th_text_head.content= Label(text='This is my text content')

          #Create image tab
          th_img_head= TabbedPanelHeader(text='Image tab')
          th_img_head.content= Image(source='sample.jpg',pos=(400, 100), size=(400, 400))

          #Create button tab
          th_btn_head = TabbedPanelHeader(text='Button tab')
          th_btn_head.content= Button(text='This is my button',font_size=20)

          tb_panel.add_widget(th_text_head)
          tb_panel.add_widget(th_img_head)
          tb_panel.add_widget(th_btn_head)          

          return tb_panel

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

Run the above code using Kivy by typing kivy tabbedpanel.py inside the command prompt. You should get the following output!

kivy_tabbedpanel_2

kivy_tabbedpanel_3

Output screenshots

Output screenshots

It is important to note that the Default tab is added when the TabbedPanel is instantiated. Tabs created individually get added to the Default tab.

So, that’s it for this tutorial. Keep visiting for some more interesting Kivy tutorials! :)

Karan Balkar About Karan Balkar
self proclaimed extraterrestrial fandroid, computer engineer, amateur gamer and die hard punk rock fan!

3 thoughts on “Learning Kivy: TabbedPanel

  1. Hi Karan,

    nice series of posts!
    Some questions:
    1) why do you import Builder?
    2) what do the th_ and tb_ prefixes signify?
    3) how would one change the text of the Default tab when the TabbedPanel is instantiated?

    • Hey, thanks for your comment! :)

      1) You don’t need to import Builder. It is an unused import. Sorry for that. Removed it from the code!
      2) th_ stands for tabbedpanel header and tb_ stands for tabbedpanel
      3) In that case you need to customize your tabbedpanel. You could do something like: tp.default_tab_text = ‘My default text’ where tp is your TabbedPanel instance (see this)

      • Thanks for your quick reply! Honestly, I should have checked the kivy docs before posting the last two questions. Hopefully it will help some future readers here.

Leave a Reply