Search code examples
androidscrolltoolbar

CoordinatorLayout collapse Toolbar in Activity from Fragment

I have an activity with DrawerLayout for navigation menu, Toolbar, and FrameLayout, where displaying fragments with content. In fragment I have an View with some content, for example: ImageView for profile avatar and TextView for profile name. When Fragment is scrolling down, I need collapse Toobar from Activity(hide View with content from Fragment in Toolbar /Toobar overlap View/) and when Fragment is scrolling up I need expand Toolbar (show View with content from Toobar).

Activity

    <android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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:orientation="vertical"
        tools:context=".activity.MainActivity">

        <android.support.design.widget.AppBarLayout
            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="wrap_content">

            <include
                android:id="@+id/myToolBar"
                layout="@layout/activity_main_toolbar" />

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

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

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

    <ListView
        android:id="@+id/list_slider_menu"
        android:layout_width="@dimen/main_activity_slider_menu_list_view_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list_background"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="@dimen/main_activity_slider_menu_list_view_divider_height"
        android:listSelector="@drawable/drawer_list_selector" />

</android.support.v4.widget.DrawerLayout>

Fragment

    <android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cabinetSwipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.geodevteam.geopay.project.activity.UserProfileActivity">

    <ScrollView
        android:id="@+id/cabinetScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/app_child_layout_background"
        android:fillViewport="false">

        <LinearLayout
            android:id="@+id/cabinetRootLayout"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/cabinetTopLayout"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <RelativeLayout
                    android:id="@+id/cabinetInformationLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="5dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="1dp"
                    android:background="@color/cello_transparent">

                    <com.geodevteam.geopay.project.utils.graphics.RoundedImageView
                        android:id="@+id/cabinetAvatarImageView"
                        android:layout_width="100dp"
                        android:layout_height="100dp"
                        android:layout_marginTop="5dp"
                        android:layout_centerHorizontal="true" />

                    <TextView
                        android:id="@+id/cabinetNameTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/cabinetAvatarImageView"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        style="@style/ProfileNameTextView"/>

                    <TextView
                        android:id="@+id/cabinetTelephoneTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/cabinetNameTextView"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:visibility="gone"
                        style="@style/ProfileSimpleTextView"/>

                    <TextView
                        android:id="@+id/cabinetAddTelephoneTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/cabinetTelephoneTextView"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:visibility="gone"
                        style="@style/ProfileSimpleTextView"/>

                    <TextView
                        android:id="@+id/cabinetBalanceTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/cabinetAddTelephoneTextView"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        style="@style/ProfileSimpleTextView"/>

                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/cabinetTrustLineLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:background="@color/cello_transparent">

                </RelativeLayout>

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/cabinetContractorListLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/trustLineTitleTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="8dp"
                    style="@style/CabinetTrustLinesTextView"
                    android:text="@string/trust_lines" />

                <ProgressBar
                    android:id="@+id/cabinetProgressBar"
                    style="?android:progressBarStyleLarge"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:layout_centerHorizontal="true"
                    android:visibility="gone"/>

                <ListView
                    android:id="@+id/cabinetContractorsListView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@id/trustLineTitleTextView"
                    android:layout_marginTop="2dp">

                </ListView>

            </RelativeLayout>

        </LinearLayout>

    </ScrollView>

</android.support.v4.widget.SwipeRefreshLayout>

How can I hide cabinetTopLayout in Toolbar (Collapse Toolbar when scrolling down)? It's possible?

Solution
    1. Use NestedScrollView instead of ScrollView in the Fragment xml.
    2. Set the attributte app:layout_behavior="@string/appbar_scrolling_view_behavior" to the NestedScrollView instead of adding it to the fragment container.

    A full working example:

    activity.xml

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

  <fragment
      android:id="@+id/fragment"
      android:name="io.victoralbertos.stackoverflow.ChildFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:layout="@layout/child_fragment"/>

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"/>

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


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

    child_fragment.xml

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        android:textSize="150sp"
        android:text="Scroll me as much as you need"
        android:layout_height="match_parent"/>
  </LinearLayout>

</android.support.v4.widget.NestedScrollView>