Positioning of MDTopAppBar elements #2

[AHiXilTOr]

Description of the Bug

pos_hint: {"center_x": .5} doesn't work

Code and Logs

from kivymd.app import MDApp
from kivy.lang import Builder

kv = """
MDScreen:
    md_bg_color: self.theme_cls.secondaryContainerColor

    MDTopAppBar:
        type: "small"
        size_hint_x: .8
        pos_hint: {"center_x": .5, "center_y": .5}

        MDTopAppBarLeadingButtonContainer:

            MDActionTopAppBarButton:
                icon: "menu"

        MDTopAppBarTitle:
            text: "AppBar small"
            pos_hint: {"center_x": .5}

        MDTopAppBarTrailingButtonContainer:

            MDActionTopAppBarButton:
                icon: "account-circle-outline"
"""

class App(MDApp):
    def build(self):
        return Builder.load_string(kv)

App().run()
"""


class MainApp(App):
    def build(self):
        self.root = Builder.load_string(kv)


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

Screenshots

Versions

• OS: Any
• Python: Any
• Kivy: Any
• KivyMD: dev

[T-Dynamos]

What is the use case of centering that icon?

It does not matches material design spec.

https://m3.material.io/components/top-app-bar/specs

(It does not declare anywhere to center icons)

[AHiXilTOr]

What is the use case of centering that icon?

It does not matches material design spec.

https://m3.material.io/comComponents/top-app-bar/specs

(It does not declare anywhere to center icons)

Not an icon, but a title.

[WangZhongDian]

I also encountered the same problem

[nattokukun]

I also encountered the same problem

[jporta09]

I also encountered the same problem

[theolaos]

I also encountered the same problem

The problem seems to happen only when you try to center align the title. If you remove the alignment (pos_hint: {"center_x": .5}) Then everything works fine.

[nattokukun]

I see solved. thank you very much.

[MaxSavenkov]

I also face the same issue, and removing "pos_hint: {"center_x": .5}" does not help. However, the problem goes away if I update the text from code, or resize window. It seems the problem is in some order of updates.

[LoloCG]

Fixed it by adding very small padding to the parent layout that contains the MDTopAppBar, and never leaving it completely empty.

Example:

MDBoxLayout:
        orientation: 'vertical'
        size_hint: 1, 1
        padding: 0.1, 0.1    # This is insignificant and cant be seen, but fixes the bug without requiring re-sizing the windows

        MDTopAppBar:
            type: "small"
                    
            MDTopAppBarLeadingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "menu"
                    
            MDTopAppBarTitle:
                text: " "    # Empty space, otherwise wont work. Works with anything but empty.

            MDTopAppBarTrailingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "dots-vertical"

Took the idea from PR https://github.com/kivymd/KivyMD/pull/1746