CODEWITHSUNDEEP
pythonkivykivymd
krmani
krmani

Reputation: 616

How to make gridlayout in kivymd?

I am trying to make grid layout in kivymd. GridLayout created but width not filling the screen. How can extend the width of column to fit the screen in kivymd?

I have used example from kivymd docs and used it create a grid layout.

app.py

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.lang import Builder
from main_screen_str import helper_string
from kivy.core.window import Window

Window.size = (300, 500)


class MainScreen(Screen):
    pass


class MainApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.sm = ScreenManager()
        self.sm.add_widget(MainScreen(name="main_screen"))

        self.main_str = Builder.load_string(helper_string)

    def build(self):
        screen = Screen()
        screen.add_widget(self.main_str)
        return screen


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

This is builder string. The gridlayout created but the width not fitting the screen. How can I extend the width for individual column in the gridlayout?

build string

helper_string = """
ScreenManager:
    MainScreen:

<MainScreen>:
    name: 'main_screen'
        
    MDGridLayout:
        cols: 3
        
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color 
"""

Upvotes: 2

Views: 4064

Answers (1)

John Anderson
John Anderson

Reputation: 39092

According to the MDIconBuuton Documentation:

By default, MDIconButton button has a size (dp(48), dp (48))

And the GridLayout will use those size values to size the columns. You can adjust the column size by adjusting the size of the MDIconButtons. So, if you just add:

size_hint_x: 0.33

to each MDIconButton, each column will be one third the width of the MainScreen.

Upvotes: 2

Related Questions