Material3 MaterialToolbar disable coloring at scroll

Question

I am migrating my app to Theme.Material3.* and found that the MaterialToolbar is now being highlighted in some accent color as soon as some content scrolls underneath it. See the animation that I'm referring to below:

However, I don't want this effect to be present within my application. But while reading through the MaterialToolbar documentation, it seems like there is no way to disable or modify it, which irritates me. What am I missing here?

The minimal XML layout to reproduce the behaviour (as well as using a Material3 theme):

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:liftOnScroll="true">

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleCentered="true"
            app:title="Welcome"
            app:layout_scrollFlags="noScroll" />

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
   
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet..." />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Thanks for your help.

Marquee

Answer 1

So, after playing around a while, I'm going to share my findings.

The background color animation takes place at scrolling only when the attribute app:liftOnScroll is set to true in the AppBarLayout.

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

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/primaryToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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

When setting app:liftOnScroll="false", the Toolbar will permanently show the highlight color. This then can be changed by setting the android:background attribute.

In case you have a Layout containing two AppBars, and you want both to show the animation at scrolling, you can synchronize them by calling addLiftOnScrollListener like so:

primaryAppbar.addLiftOnScrollListener(new AppBarLayout.LiftOnScrollListener() {
    @Override
    public void onUpdate(float elevation, int backgroundColor) {
        secondaryAppbar.setElevation(elevation);
        secondaryAppbar.setBackgroundColor(backgroundColor);
    }
});

In this case, primaryAppbar is the one receiving the scroll events.

Marquee

Thanks, this helped me a lot! BTW, it's also possible to set app:liftOnScrollColor to change the color when the screen scrolls. – Trainman

Answer 2

If you use jetpack compose, all types(CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar) of TopAppBar have parameter color. We can use it to set correct color for scrolled TopAppBar.

If you would like to use default colors, but change only scrolled color:

colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
    scrolledContainerColor = MaterialTheme.colorScheme.surface
),

Full code of TopAppBar:

CenterAlignedTopAppBar(
    title = {
        Text(text = stringResource(id = R.string.teams))
    },
    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
        scrolledContainerColor = MaterialTheme.colorScheme.surface
    ),
)

Mucilaginous

Answer 3

You can add a style for toolbar.

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    style="@style/Widget.Material3.Toolbar.Surface"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="noScroll"/>

Sapanwood