Search code examples
androidandroid-design-libraryandroid-collapsingtoolbarlayoutgoogleio

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


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.


Solution

  • 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