CoordinatorLayout + Fragment + NavigationDrawer

Question

I'm trying to implement the CoordinatorLayout into my App. I tried many different tutorials and I also tried to adapt the solution on CoordinatorLayout + AppBarLayout + NavigationDrawer for my problem but I couldn't figure out why it's not working.

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/id_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/expandedImage"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/header"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_actionbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            android:minHeight="@dimen/abc_action_bar_default_height_material"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.CollapsingToolbarLayout>

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

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true">

        <Button
            android:id="@+id/emiter"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginTop="-70dp"
            android:text="" />
    </FrameLayout>

    <fragment
        android:id="@+id/fragment_drawer"
        android:name="com.myapp.test.navigationdrawer.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

The coordinator itself seems to be working since I can get the effect but only when "scrolling" the upper part of the screen with the ToolBar. It doesn't work for my ScrollView in my Fragment below the ToolBar. What am I doing wrong?

What is not working? The ScrollView/Fragment of which you are talk about is not part of the code in the question? — jayeshsolanki93, May 24 '16 at 03:08
@jayeshsolanki93 Yes so the Fragments are different and I changed them with fragmentTransaction.replace(R.id.container, newFragment); — user754730, May 24 '16 at 07:19

Zellius · Accepted Answer · 2016-05-27T07:01:25.287

It doesn't work for my ScrollView in my Fragment

The CoordinatorLayout can listen only nested scroll. Use NestedScrollView or RecyclerView as root View in each fragment which you will add into your Activity and the CoordinatorLayout will receive scroll events.

Like so:

Your activity.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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/id_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/expandedImage"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/test"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_actionbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            android:minHeight="@dimen/abc_action_bar_default_height_material"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.CollapsingToolbarLayout>

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

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true">

        <Button
            android:id="@+id/emiter"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginTop="-70dp"
            android:text="" />
    </FrameLayout>

    <fragment
        android:id="@+id/fragment_drawer"
        class="ru.solodovnikov.test.MainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>

Your fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:text="TOOOOOO LONG TEXT..."
        android:layout_height="wrap_content" />
</android.support.v4.widget.NestedScrollView>

You can use ScrollView. But CoordinatorLayout will not receive scroll events and your views inside it will not react on scrolling. So just change your ScrollView to NestedScrollView. — Zellius, May 26 '16 at 19:50
So but basically I can't use this code in my acitivity_main.xml file (So I only need it once) but instead I have to add it to every Fragment's layout xml file? — user754730, May 26 '16 at 21:36
Please, look at my edited answer. Yes, you need to use the NestedScrollView as root View in each fragment's layout xml file. — Zellius, May 27 '16 at 07:05
Thanks a lot! This works perfectly! I didn't know that there needs to be a NestedScrollView in EACH fragment :) — user754730, May 29 '16 at 21:35

CoordinatorLayout + Fragment + NavigationDrawer

1 Answers1