How to center GridLayout in kivymd?

Question:

I have certain news that are filled in first in MD3Card and then lined up in a tabular view in GridLayout with scrolling, but no matter how I tried, it didn’t work out to do it all in the center and not on the left edge as in the photo.

enter image description here

Kivymd style:

VK = '''
    <Tab>
        ScrollView:
            md_bg_color: "#f8f8f8"
            bar_width: 0
            GridLayout:
                id: tab_box  
                padding: "5dp" 
                cols: 3 
                spacing: 10
                size_hint_y: None
                height: self.minimum_height
             
            
    <MD3Card>
        size_hint: None, None
        size: "200dp", "230dp"
        md_bg_color: "green"
        pos_hint: {"center_x": .5, "center_y": .5}
        MDBoxLayout:
            orientation: "vertical"
            FitImage:
                source: root.card_image
                radius: 6
                size_hint_y: 2   
            MDBoxLayout:
                padding: "10dp"
                MDLabel:
                    text: root.card_text
                    pos_hint: {"center_x": .5, "center_y": .5}
                    color: "black"
            
    MyBL:
        orientation: "vertical"
    
        MDTopAppBar:
            title: root.tb_title_text
            md_bg_color: "black" 
            
        MDBottomNavigation:
            panel_color: "black"
            text_color_normal: "#999999"
            text_color_active: "#ededed"
    
            MDBottomNavigationItem:
                name: 'screen 1'
                text: 'News'
                icon: 'gmail'
                badge_icon: "numeric-1"
                on_tab_press: root.nb_1() 
                
                MDTabs:
                    id: tabs  
                    background_color: "black"
                    on_tab_switch: app.on_tab_switch(*args)                        
    
            MDBottomNavigationItem:
                name: 'screen 2'
                text: 'TV'
                icon: 'twitter'
                on_tab_press: root.nb_2()
    
            MDBottomNavigationItem:
                name: 'screen 3'
                text: 'Radio'
                icon: 'linkedin'
                on_tab_press: root.nb_3()   
    '''

Main code:

from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.properties import StringProperty, ObjectProperty

from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.card import MDCard

class Tab(MDFloatLayout, MDTabsBase):
    '''Class implementing content for a tab.'''

class MD3Card(MDCard):
    '''Implements a material design v3 card.'''
    card_image = StringProperty()
    card_text = StringProperty()

class MyBL(MDBoxLayout):

    nb_label_text_1 = StringProperty("News")
    nb_label_text_2 = StringProperty("TV")
    nb_label_text_3 = StringProperty("Radio")
    tb_title_text = StringProperty("News")

    text = StringProperty()

    def nb_1(self):
        self.nb_label_text_1 = "News"
        self.tb_title_text = "News"

    def nb_2(self):
        self.nb_label_text_2 = "TV"
        self.tb_title_text = "TV"

    def nb_3(self):
        self.nb_label_text_3 = "Radio"
        self.tb_title_text = "Radio"

class Test(MDApp):

    def build(self):
        return Builder.load_string(VK)

    def on_start(self):
        categories = ["main thing","society","economy","health","sports","housing and communal services","politics","culture","science and education",
                      "world news","opinions","they need help","results of the week","special report","national projects","incidents"]
        print(categories)
        for categorie in categories:
            self.root.ids.tabs.add_widget(
                Tab(
                    title=categorie
                )
            )

    def on_tab_switch(
            self, instance_tabs, instance_tab, instance_tab_label, tab_text
    ):
        '''Called when switching tabs.

        :type instance_tabs: <kivymd.uix.tab.MDTabs object>;
        :param instance_tab: <__main__.Tab object>;
        :param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
        :param tab_text: text or name icon of tab;
        '''
        # if tab_text == "главное":
        if tab_text == "main thing":
            instance_tab.ids.tab_box.clear_widgets()
            print(tab_text)
            newss = {"news1":"2.jpg", "news2":"2.jpg", "news3":"5.jpg", "news4":"2.jpg", "news5":"5.jpg", "news6":"5.jpg"}
            for news in newss.keys():
                instance_tab.ids.tab_box.add_widget(
                    MD3Card(
                        card_image=newss[news],
                        card_text=news,
                    )
                )

Test().run()

Is there any other option as a tip for changing the number of cells in a row, let’s say if the screen is already the same, not 3 cells, but two, and the rest already goes below.

Asked By: Friken

||

Answers:

Code:

<Tab>
    ScrollView:
        md_bg_color: "#f8f8f8"
        bar_width: 0
        GridLayout:
            id: tab_box  
            padding: "5dp" 
            cols: 3 
            spacing: 10
            size_hint_y: None
            height: self.minimum_height

Replace with:

<Tab>
    ScrollView:
        MDBoxLayout:
            orientation: "vertical"
            adaptive_height: True
            MDBoxLayout:
                pos_hint: {'center_x': .5}
                orientation: "vertical"
                adaptive_height: True
                adaptive_width: True
                GridLayout:
                    id: tab_box  
                    padding: "5dp" 
                    cols: 3 
                    spacing: 10
                    size_hint: None, None
                    size: self.minimum_size

or:

<Tab>
    ScrollView:
        MDBoxLayout:
            orientation: "vertical"
            adaptive_height: True
            MDBoxLayout:
                pos_hint: {'center_x': .5}
                orientation: "vertical"
                adaptive_height: True
                GridLayout:
                    id: tab_box  
                    padding: "5dp" 
                    cols: 3 
                    spacing: 10
                    size_hint: None, None
                    size: self.minimum_size
                    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
Answered By: Friken
Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.