Search code examples
pythonuser-interfacetabskivytextinput

how to use GridLayout in TabeedPanel using kivy in python


I am trying to make a GUI in python using kivy and TabeedPanel . some problems are coming for putting on exact location of label, TextInput , button. I'm unable to put multiple label, TextInput altogether. That's why I commented in the code. I tried GridLayout also, but Unable to arrange exactly. Can you help me? Thanks in advance.

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel, TabbedPanelItem
from kivy.lang import Builder
from kivy.uix.checkbox import CheckBox
from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.textinput import TextInput
import json

Builder.load_string("""

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'
        BoxLayout:
            Label:
                text: 'label'
            TextInput:
                text: 'TextInput'
            CheckBox: 
                text: 'CheckBox'
            Button:
                text: 'save'

    #BoxLayout:
     #   orientation: 'vertical'
      #  BoxLayout:
       #     orientation: 'horizontal'
        #    Label:
         #       text: 'label'



    TabbedPanelItem:
        text: 'page2'
        BoxLayout:
            Label:
                text: 'number1'
        #TextInput:
        #   text: 'TextInput'
            Label:
                text: 'number2'
       # TextInput:
       #    text: 'TextInput'
            Button:
                text: 'button'

""")

class Test(TabbedPanel):
    pass

class MyApp(App):

    def build(self):
        test = Test()
        return test


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

kivy gui


Solution

  • Here's an example using GridLayout that I made a reference to in your other question. FYI, there are many ways you could go about this. I personally like using gridlayout with forms because it's easy to put then ScrollViews if need be.

    Read up on the kv language here to help keep things DRY and other things. If a widget is defined in kv, then you don't need to import them at the top of your file.

    Example:

    from kivy.app import App
    from kivy.uix.tabbedpanel import TabbedPanel
    from kivy.lang import Builder
    
    Builder.load_string("""
    <MyLabel@Label>:
        size_hint: (None, None)
        size: (400, 100)
    
    <MyTextInput@TextInput>:
        size_hint: (None, None)
        size: (600, 100)
    
    <MyButton@Button>:
        size_hint: (None, None)
        size: (400, 100)
    
    <MyCheckBox@AnchorLayout>:
        # I'm nesting the checkbox here b/c it is hard to see if the background is not lightened.
        size_hint: (None, None)
        size: (100, 100)
        anchor_x: "center"
        anchor_y: "center"
        canvas.before:
            Color:
                rgba: [0.7, 0.7, 0.7, 1]
            Rectangle:
                pos: self.pos
                size: self.size
        CheckBox:
    
    <Test>:
        do_default_tab: False
    
        TabbedPanelItem:
            text: 'page1'
            GridLayout:
                rows: 3
                cols: 4
                padding: [10, 100]
                spacing: [10, 50]
                MyLabel:
                    text: "Label 1"
                MyTextInput:
                MyCheckBox:
                MyButton:
                    text: "Button 1"
                MyLabel:
                    text: "Label 3"
                MyTextInput:
                MyCheckBox:
                MyButton:
                    text: "Button 2"
                MyLabel:
                    text: "Label 3"
                MyTextInput:
                MyCheckBox:
                MyButton:
                    text: "Button 3"
    
    
        TabbedPanelItem:
            text: 'page2'
            GridLayout:
                rows: 3
                cols: 2
                padding: [10, 100]
                spacing: [10, 50]
                MyLabel:
                    text: "Label 1"
                MyTextInput:
    
                MyLabel:
                    text: "Label 2"
                MyTextInput:
    
                # blank spacer widget
                Widget:
                    size_hint: (None, None)
                    size: (400, 100)
                MyButton:
                    text: "Button"
    """)
    
    
    class Test(TabbedPanel):
        pass
    
    
    class MyApp(App):
    
        def build(self):
            return Test()
    
    
    if __name__ == '__main__':
        MyApp().run()