material-components-android icon indicating copy to clipboard operation
material-components-android copied to clipboard

MaterialToolbar bug in height after adaption on edge-to-edge enforcement of Android 15

Open ArcherEmiya05 opened this issue 1 year ago • 4 comments

Description: MaterialToolbar height is incorrect for phone size devices after adapting to edge-to-edge enforcement for Android 15.

Phone (Portrait) image

Phone (Landscape) image

Layout bounds image

Expected behavior: Correct MaterialToolbar height on both portrait and landscape orientation for phone size devices.

Tablet (Portrait) image

Tablet (Landscape) image

Source code:

XML layout (Phone portrait)

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".presentation.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|snap"
            app:menu="@menu/activity_main_overflow"
            app:title="@string/home"
            app:subtitle="@string/assets"
            app:titleCentered="true"
            app:subtitleCentered="true" />

    </com.google.android.material.appbar.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment_content_main"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/main_navigation" />

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_navigation_menu"
        app:layout_behavior="com.devsbitwise.android.material.utils.BottomNavigationBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

XML layout (Tablet portrait)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".presentation.MainActivity">

    <androidx.drawerlayout.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawer_layout"
        tools:openDrawer="start">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|snap"
                    app:menu="@menu/activity_main_overflow"
                    app:title="@string/home"
                    app:subtitle="@string/assets"
                    app:titleCentered="true"
                    app:subtitleCentered="true" />

            </com.google.android.material.appbar.AppBarLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <androidx.fragment.app.FragmentContainerView
                    android:id="@+id/nav_host_fragment_content_main"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:defaultNavHost="true"
                    app:navGraph="@navigation/main_navigation" />

            </FrameLayout>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header_nav_main"
            app:menu="@menu/activity_main_drawer" />

    </androidx.drawerlayout.widget.DrawerLayout>

</FrameLayout>

Activity with inset adjustment

ViewCompat.setOnApplyWindowInsetsListener(toolBar) { v: View, insets: WindowInsetsCompat ->
    val barInset = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    // Add padding to this view based on status bar inset
    v.updatePadding(top = barInset.top)
    WindowInsetsCompat.CONSUMED
}

XML (style)

    <!-- Toolbar style on both light and night mode -->
    <style name="MDCToolbar" parent="Widget.Material3.Toolbar.Surface" tools:keep="@style/MDCToolbar">
        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.MDC.Toolbar</item>
    </style>

    <style name="ThemeOverlay.MDC.Toolbar" parent="" tools:keep="@style/ThemeOverlay_MDC_Toolbar">
        <!-- Background color -->
        <item name="colorSurface">@color/mdc_colorWhite_Primary</item>
        <!-- Title and Navigation icon color -->
        <item name="colorOnSurface">@color/mdc_colorPrimaryDark_White</item>
        <!-- Subtitle and Action item color -->
        <item name="colorOnSurfaceVariant">@color/mdc_colorPrimaryDark_White</item>
        <!-- Action item and Overflow menu color when `colorOnSurfaceVariant` is not working -->
        <!-- Drawer icon and Navigation icon also use this -->
        <item name="colorControlNormal">@color/mdc_colorPrimaryDark_White</item>
    </style>
<style name="Theme.Cryptonian" parent="Theme.Material3.DayNight">
     <item name="toolbarStyle">@style/MDCToolbar</item>
</style>

Minimal sample app repro: N/A

Android API version: 5.0 and above

Material Library version: 1.12.0

Device: AVD/Emulators

ArcherEmiya05 avatar Dec 11 '24 17:12 ArcherEmiya05

Is there a propose fix to this already or is there something wrong on how edge-to-edge was being handled?

ArcherEmiya05 avatar Feb 19 '25 14:02 ArcherEmiya05

I have similar issue

adasharma avatar Jul 08 '25 13:07 adasharma

Hi, it's been a long time since I created this issue. Is there a plan for this or workaround? Thanks

ArcherEmiya05 avatar Jul 17 '25 23:07 ArcherEmiya05

I have similar issue as well. Updating toolbar margin instead of padding seems to work to certain degree, but then I get issues with shared element transitions.

k-arabadzhiev avatar Jul 22 '25 11:07 k-arabadzhiev