Kivy: MDIconButton not centering in Gridlayout and MDLabel with button behavior cannot be moved

Question

I'm new to Kivy and I want to make a signin screen for my app. I have two problems. First, inside my Gridlayout I have 3 MDIconbuttons and they cannot seem to be centered no matter what I try. Second, I want the MDLabel with the text "Forgot your password/username?" to be closer to the MDTextFieldRound I have above, but putting in negative padding moves the text, but not the button behavior.

main.py

import kivy 
from kivy.uix.widget import Widget
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.behaviors.button import ButtonBehavior
from kivymd.app import MDApp
from kivymd.theming import ThemeManager

class SignInScreen(Screen):
    pass

class ButtonGrid(ButtonBehavior, BoxLayout):
    pass

class AttendanceApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "LightBlue"
        self.theme_cls.accent_palette = "Red"
        return SignInScreen()
    def change_theme(self, primary_palette, accent_palette):
        pass
        #theme_cls = ThemeManager()
    def signin_pressed(self, instance):
        pass

if __name__ == "__main__":
    AttendanceApp().run()

Attendance.kv

# Filename: Attendance.kv

#:import utils kivy.utils

#screens

<SignInScreen>
    #change_theme: app.change_theme("Bright Blue", "Red")
    BoxLayout:
        orientation: "vertical"
        pos_hint: {"center_x": .5, "center_y": .75}
        size_hint: .8, 1
        spacing: dp(25)


        MDTextFieldRound:
            id: username
            icon_right: "email"
            helper_text: "Email"
            normal_color: .4, .4, .4, .4

        MDTextFieldRound:
            id: password
            icon_right: "key"
            helper_text: "Password"
            password: True
            normal_color: .4, .4, .4, .4

        ButtonGrid:
            size_hint: .9, None
            height: 10
            pos_hint: {"center_x": .5}
            on_press: print(self.pos)

            BoxLayout:

                MDLabel:
                    valign: "top"
                    text: "Forgot your password/username?"
                    halign: "center"
                    theme_text_color: "Custom"
                    font_style: "Caption"
                    text_color: .4, .4, .4, .4

        MDFillRoundFlatButton:
            text: "Sign In"
            custom_color: .17, .24, .98, 1
            pos_hint: {"center_x": .5}

        BoxLayout:
            size_hint: .9, None
            height: 25
            pos_hint: {"center_x": .5}
            padding: 0, 0, 0, -50

            MDLabel:
                text: "Or sign in with"
                halign: "center"
                theme_text_color: "Custom"
                font_style: "Caption"
                text_color: .4, .4, .4, 1


        GridLayout:
            padding: 0, 10, 0, 0
            spacing: dp(25)
            size_hint: 1, None
            height: 1
            cols: 3
            halign: "center"
            canvas:

                Color:
                    rgba: .4, .4, .4, 1

                Rectangle:
                    size: self.size
                    pos: self.pos

            MDIconButton:
                icon: "google"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

            MDIconButton:
                icon: "facebook-box"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

            MDIconButton:
                icon: "twitter"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

Right now the Application looks like this: Application Screen Signin

score 2 · Accepted Answer · answered Jul 22 '20 at 23:25

The MDIconButton has a fixed size and the GridLayout will set its column width according to the MDIconButton width, which ends up putting all the MDIconButtons to the left.

You can use AnchorLayout, which does not have a fixed size, to contain each MDIconButton. The AnchorLayouts will each get the same share of the GridLayout width, and by default, places its content in the center of its area.

I have changed the GridLayout height to self.minimum_height, so it calculates its height based on the children heights. And the canvas instruction is changed to handle this.

    GridLayout:
        padding: 0, 10, 0, 0
        spacing: dp(25)
        size_hint: 1, None
        height: self.minimum_height
        cols: 3
        canvas:
            Color:
                rgba: .4, .4, .4, 1
            Rectangle:
                size: self.width, 1
                pos: self.x, self.y+self.height-1

        AnchorLayout:
            size_hint_y: None
            height: but1.height
            MDIconButton:
                id: but1
                icon: "google"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

        AnchorLayout:
            size_hint_y: None
            height: but2.height
            MDIconButton:
                id: but2
                icon: "facebook-box"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

        AnchorLayout:
            size_hint_y: None
            height: but3.height
            MDIconButton:
                id: but3
                icon: "twitter"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

Kivy: MDIconButton not centering in Gridlayout and MDLabel with button behavior cannot be moved

1 Answers1