#3: Collapsing Toolbar

Collapsing Toolbar

        CollapsingToolbarLayout is a ViewGroup that provides many of the visual characteristics and interactions for collapsing toolbars specified in the material guidelines. To create the collapsing toolbar, CollapsingToolbarLayout integrates with AppBarLayout, CoordinatorLayout, Toolbar, and a scrollable content view, such as RecyclerView.

How to work with Collapsing Toolbar:

    To add a collapsing toolbar to your layout, place the CollapsingToolbarLayout inside an AppBarLayout. Then, add a Toolbar and any other views as a child to the CollapsingToolbarLayout. Make sure that the entire view structure is inside a CoordinatorLayout to take advantage of CollapsingToolbarLayout’s scrolling and features.

Sample Code:

<android.support.design.widget.CoordinatorLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <!-- Scrollable view here -->

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

      android:layout_width="match_parent"

      android:layout_height="@dimen/tall_toolbar_height">

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

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:contentScrim="?attr/colorPrimary"

        app:expandedTitleGravity="top"

        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

      <android.support.v7.widget.Toolbar

          android:layout_width="match_parent"

          android:layout_height="?attr/actionBarSize"

          app:layout_collapseMode="pin"/>

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

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

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

Source code:

<?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"
    tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appbar"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true"
    >
    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"

        android:fitsSystemWindows="true"
        >
        <!--
         app:layout_scrollFlags="scroll|exitUntilCollapsed"
         This line provides collapsing mode for Toolbar-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/background"
            android:contentDescription="@string/app_name"
            android:scaleType="centerCrop"            
            app:layout_collapseMode="parallax"/>
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Light"
            app:title="@string/recent_news"
            app:layout_collapseMode="pin"

           />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true"

            >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textColor="@color/colorText"
                    android:fontFamily="sans-serif"
                    android:padding="10dp"
                    android:textSize="15sp"
                    android:textStyle="bold"
                    android:text="@string/news_in"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_time"
                        android:contentDescription="@string/app_name"/>
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="9"
                        android:gravity="center_vertical"
                        android:textColor="@color/colorText"
                        android:fontFamily="sans-serif"
                        android:padding="10dp"
                        android:textSize="12sp"
                        android:textStyle="bold"
                        android:text="@string/publish_date"/>
                </LinearLayout>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textColor="@color/colorText"
                    android:fontFamily="sans-serif"
                    android:padding="10dp"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:text="@string/news_in"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_fav"
        android:elevation="6dp"
        app:pressedTranslationZ="16dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>