Reports

I had a similar issue where the MaterialToolbar title and navigation/menu icons appeared misaligned or not centered properly. After some investigation, I found that the problem was caused by the app theme.

If you're using:

<style name="Base.Theme.YourApp" parent="Theme.Material3.DayNight.NoActionBar" />

You might experience layout inconsistencies with MaterialToolbar, since Material3 (Material You) components aren't fully compatible with some of the older MaterialComponents views like MaterialToolbar.

Change your app theme to use MaterialComponents instead of Material3:

<style name="Base.Theme.YourApp" parent="Theme.MaterialComponents.DayNight.NoActionBar" />

After switching to MaterialComponents, the toolbar title and icons were properly aligned.

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)

    [...]

    ViewCompat.setOnApplyWindowInsetsListener(binding.topAppBar) { view, windowInsets ->
        val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
        view.updatePadding(
            top = insets.top,
            left = insets.left,
            right = insets.right
        )
        WindowInsetsCompat.CONSUMED
    }

    setSupportActionBar(binding.topAppBar)
    // other setup code...
}

Hope this helps someone facing the same issue!

79598953