Python (Kivy) - How to resize tabs of a TabbedPanel

Question

I'm using the Kivy library for the first time and I'm trying to develop a simple UI with a TabbedPanel. I would set the size (x) of each tab (in the code TabbedPanelItem) to fit at the entire TabbedPanel's width but if I use height or size_hint in the .kv file, seems they doesn't work.

Here my kv code:

#:import sm kivy.uix.screenmanager
ScreenManagement:
    transition: sm.FadeTransition()
    SecondScreen:


<SecondScreen>:
    tabba: tabba
    name: 'second'
    FloatLayout:
        background_color: (255, 255, 255, 1.0)
        BoxLayout:
            orientation: 'vertical'
            size_hint: 1, 0.10
            pos_hint: {'top': 1.0}
            canvas:
                Color:
                    rgba: (0.98, 0.4, 0, 1.0)
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                text: 'MyApp'
                font_size: 30
                size: self.texture_size

        BoxLayout:
            orientation: 'vertical'
            size_hint: 1, 0.90
            Tabba:
                id: tabba

        BoxLayout:
            orientation: 'vertical'
            size_hint: 1, 0.10
            pos_hint: {'bottom': 1.0}
            Button:
                background_color: (80, 1, 0, 1.0)
                text: 'Do nop'
                font_size: 25


<Tabba>:
    do_default_tab: False
    background_color: (255, 255, 255, 1.0)
    # I would these three tabs' width filling the entire TabbedPanel's width
    TabbedPanelItem:
        text: 'First_Tab'
        Tabs:

    TabbedPanelItem:
        text: 'Second_Tab'
        Tabs:

    TabbedPanelItem:
        text: 'Third_Tab'
        Tabs:


<Tabs>:
    grid: grid
    ScrollView:
        do_scroll_y: True
        do_scroll_x: False
        size_hint: (1, None)
        height: root.height
        GridLayout:
            id: grid
            cols: 1
            spacing: 10
            padding: 10
            size_hint_y: None
            height: 2500

Here my Python code:

# coding=utf-8
__author__ = 'drakenden'

__version__ = '0.1'

import kivy
kivy.require('1.9.0') # replace with your current kivy version !

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.properties import StringProperty, ObjectProperty,NumericProperty
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.utils import platform
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.scrollview import ScrollView

class Tabs(ScrollView):
    def __init__(self, **kwargs):
        super(Tabs, self).__init__(**kwargs)


class Tabba(TabbedPanel):
    pass


class SecondScreen(Screen):
    pass

class ScreenManagement(ScreenManager):
    pass

presentation = Builder.load_file("layout2.kv")

class MyApp(App):

    def build(self):
        return presentation


MyApp().run()

I've read about using a StripLayout inside the TabbedPanel but I don't know if is a good solution and how to apply it correctly. Any suggestions?

Answer 1

I have experimented a bit with your code and after reading the TabbedPanel Docs i found out that tab_width specifies the width of the tab header (as tab_height is for the height). To use it in your kivy file you have to add the following line:

<Tabba>:
    do_default_tab: False
    tab_width: self.parent.width / 3
    background_color: (255, 0, 255, 1.0)
    # I would these three tabs' width filling the entire TabbedPanel's width
    TabbedPanelItem:
    .
    .
    .
    the rest of your kivy file

What we added in this line is that each tab will be the 1/3 of it's parent width.

This even works for fewer or more tabs than 3. If you add more tabs, a horizonal scroll bar will be added to scroll through the extra tabs.

I hope I was helpful.