how to implement collapsing image view like Google IO 2015 App using Design Library

Vipul Asri picture Vipul Asri · Apr 3, 2016 · Viewed 8.8k times · Source

How to implement collapsing toolbar layout design like Google IO 2015 using Design Library

In Open Source Code of Google IO 2015, it is not implemented using Design Library (CoordinatorLayout, CollapsingToolbarLayout etc)

Google IO 2015 Session Details Layout

Note : In this the toolbar is at the bottom in upper section. I need the toolbar to be scrolling like this attached with the textview or any other view of upper section.

Answer

Vipul Asri picture Vipul Asri · Apr 16, 2016

Finally i was able to implement it.

<?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="com.vipul.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/placeholder"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                app:title=" "
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="?attr/actionBarSize"
                android:layout_marginLeft="60dp"
                android:layout_marginStart="60dp"
                android:layout_marginRight="16dp"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textColor="#FFF"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/app_name"
                    android:textColor="#FFF"
                    android:textSize="16sp" />

            </LinearLayout>

        </FrameLayout>

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

    <!--<include layout="@layout/content_scrolling" />-->

    <android.support.v4.widget.NestedScrollView 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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />

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

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

Screenshot