Rotation issue with CoordinatorLayout and DrawerLayout

Question

I have set up a DrawerLayout and a CoordinatorLayout in order to use a modern layout with a NavigationView and collapsing toolbar.

It works just fine until the device is rotated. Then the main_content is moved to a new permanent location. If I remove the appbar_scrolling_view_behavior from the main_content FrameLayout rotation works, but the content is no longer aware of the Toolbar.

Any advice?

---

---

activity_main.xml

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                     xmlns:app="http://schemas.android.com/apk/res-auto"
                                                     android:layout_width="match_parent"
                                                     android:layout_height="match_parent"
        android:background="#00ff00">
        <!-- ACTIONBAR START -->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:background="#ff0000">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways"/>
        </android.support.design.widget.AppBarLayout>
        <!-- ACTIONBAR END -->

        <!-- MAIN CONTENT START -->
        <FrameLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:background="#0000ff"/>
        <!-- MAIN CONTENT END -->
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView ...>
    <!-- NavigationView code omitted ... -->
</android.support.v4.widget.DrawerLayout>

fragment_main.xml (loaded into main_content)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".fragments.MainFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!"/>

</FrameLayout>

Answer 1

A few points that should collectively resolve your problem:

• The height of the AppBarLayout determins the expanded size of the collapsing toolbar, whilst the Toolbar determins the collapsed size. As such, you should set the AppBarLayout height to something more than the Toolbar (i.e. 280dp) to see the collapsing behaviour.
• Immediately inside the AppBarLayout should be a CollapsingToolbarLayout, which contains the Toolbar and, optionally, other views too (normally an ImageView with a parallax collapse mode)
• For the toolbar to collapse and expand correctly, it relies on a ViewGroup that supports nested scrolling (RecyclerView or NestedScrollView. As such, in your example you should try either changing main_content from a FrameLayout to a NestedScrollView, or conversely change the FrameLayout that forms the root layout of Fragment into a NestedScrollView.

Here is an example:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/coordinator_layout">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsing_toolbar_layout"
            app:contentScrim="@color/primary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/header_image"
                android:src="@drawable/header_image"
                android:scaleType="centerCrop"
                android:contentDescription="@string/header_image"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"
                app:theme="@style/ThemeOverlay.AppCompat.Dark"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>