How to replace AppBarLayout with Toolbar?

Question

Maybe sounds strange, but there is the situation:
In activity_main I have AppBarLayout:

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

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/top_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/page_title"
            app:navigationIcon="@drawable/ic_baseline_menu_24"
            app:menu="@menu/top_toolbar"
            style="@style/Widget.MaterialComponents.Toolbar.Primary"/>

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

and a button that switches to another screen, fragment_details. In there I have CoordinatorLayout with Toolbar and NestedScrollView:

<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"
    android:fitsSystemWindows="false"
    tools:context=".DetailsFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/Theme.Loovie">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@id/details_toolbar">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/details_poster"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:background="@color/teal_200"
                android:src="@drawable/ic_launcher_foreground"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/details_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.Loovie" />

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

    </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:id="@+id/details_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            tools:text="@tools:sample/lorem/random"/>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Now, if I scroll down and CoordinatorLayout collapes, Toolbar appears below AppBarLayout and there are both of them on the screen. But I need only Toolbar to appear in the place of AppBarLayout. I need the following logic: in fragment_details when I scroll down, AppBarLayout must be replaced with Toolbar. Are there any hints on how to achieve this?

score 0 · Accepted Answer · answered Apr 20 '22 at 23:25

I would not suggest you put any toolbar in your fragment as Fragments are not usually meant for holding toolbars. Your fragment is basically a mini activity on it's own with no knowledge of the UI components of it's activity. It would make more sense to adapt the Activity's toolbar according to the fragment loaded. You could look into Android Navigation Component for this.

However, I'm not sure of your use case since you want the collapsing toolbar effect. If you still want to hide the activity toolbar on collapse of your fragments CoordinatorLayout you could look into the the solution provided here and using that access your activities toolbar programmatically and change it's visibility. Or rather use the offset to smoothly decrease/increase the activity's toolbar opacity property.

How to replace AppBarLayout with Toolbar?

1 Answers1