Android edge-to-edge and Toolbar height when menu icons are hidden

Question

Since in Android API 35+ the Edge-to-edge behavior is enforced, I'm trying to implement it in my app Toolbar. This is my current implementation:

 <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?android:attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" />

To apply the top padding:

final Toolbar toolbar = findViewById(R.id.toolbar); toolbar.setTitle(getString(R.string.app_name)); toolbar.showOverflowMenu(); setSupportActionBar(toolbar); toolbar.setElevation(0); toolbar.setTitle(ctx.getString(R.string.summary)); .... ViewCompat.setOnApplyWindowInsetsListener(toolbar, (v, windowInsets) -> { final Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout()); v.setPadding(paddingLeft + insets.left, paddingTop + insets.top, paddingRight + insets.right, paddingBottom); // return WindowInsetsCompat.CONSUMED; return ViewCompat.onApplyWindowInsets(v, windowInsets); });

This is what I get: (Partially wrong since the items are not in line)

However, when I hide the menu button, the problem is far more evident:

Alessandro Krasota · Accepted Answer · 2025-04-29 18:03:54Z

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!

Collectives™ on Stack Overflow

Android edge-to-edge and Toolbar height when menu icons are hidden

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related