Learning Kivy : TabbedPanel

Hello everyone!

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!

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 post. Keep visiting for some more interesting Kivy posts! :)