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!
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!
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! 🙂
self proclaimed extraterrestrial fandroid, computer engineer, amateur gamer and die hard punk rock fan!