Search code examples
pythonkivykivymd

How to center GridLayout in kivymd?


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.


Solution

  • 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}