Collapsing Toolbar Layout – Android Design Support Library #1

1
37

In this article, we are about to discuss how to add a Collapsing toolbar layout to our Android Project. Collapsing Toolbar Layout provides a nice appealing interface with an imageview in toolbar which fades and collapses from toolbar when the content is scrolled towards bottom. Collapsing Toolbar Layout is directly available from Design Support Library released by Google in Mid 2015 which introduced many default layout features such as NavigationView, TextInputLayouts, Snackbar, Tabs, etc.

The following image demonstrates what we would like to achieve in this article.collapsing toolbar layout - demo

So let us see how we can add the exciting Collapsing Toolbar Layout to our Android Project. The source code for this tutorial can be cloned/downloaded from the github repo below:

github_repo_img

Related Links:

Android Layouts and Type of Android Layouts

Android RecyclerView Tutorial

Collapsing Toolbar Layout Integration using Android Studio:

[widget id=”text-3″]
  1. Before doing anything, let us add the design support library in our App Module’s build.gradle file’s dependencies.
    compile 'com.android.support:design:24.2.1'
    

    To get the latest version of support library, head-on to this website.

  2. Next we are going to add the following styles to our res>values>styles.xml file:
        <style name="AppTheme.NoActionBar">
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
        </style>
        
        <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    Next we will also add the following styles to our res>values-v21>styles.xml file so that we can achieve transparent status bar for devices above API V21:

    <resources>
        <style name="AppTheme.NoActionBar">
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
            <item name="android:windowDrawsSystemBarBackgrounds">true</item>
            <item name="android:statusBarColor">@android:color/transparent</item>
        </style>
    </resources>
    

    If the above folder doesnot exist in your project, create it manually. This will make the status bar transparent with the image from the collapsing toolbar layout. These are the styles we are going to use in our project.[widget id=”text-15″]

  3. Now open manifest file to use the newly created style for our Activity. We add the following attribute to our activity to ensure that we use the toolbar we declared in our xml and not the actionbar provided by the android:
    android:theme="@style/AppTheme.NoActionBar"
  4. Next we are going to add a Coordinator Layout from the Design Support Library to our Layout as RootView.
    <?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:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.coderefer.collapsingtoolbarlayoutexample.CollapsingToolbarActivity">
    
    </android.support.design.widget.CoordinatorLayout>
    

    We need to add the attribute android:fitsSystemWindows=“true” so that we need to make sure interactive elements (like buttons) aren’t hidden underneath them. For more details, refer this article.

    [widget id=”text-3″]
  5. Now we will be adding AppBarLayout inside our CoordinatorLayout.
    <android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:fitsSystemWindows="true"
     android:theme="@style/AppTheme.AppBarOverlay">
    
    </android.support.design.widget.AppBarLayout>
  6. Now we will be adding our CollapsingToolbarLayout to our AppBarLayout which we’ve included just now.
         <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/collapsing_toolbar"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways">
    
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="350dp"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:id="@+id/iv_detail"
                    android:src="@drawable/android_apple_fight"
                    app:layout_collapseMode="parallax"/>
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"/>
    
            </android.support.design.widget.CollapsingToolbarLayout>

    Here contentScrim is used to set the color of toolbar when Collapsible toolbar is collapsed.

  7. Next we need to add a NestedScrollView to our Coordinator Layout to support scrollview inside scrollview.
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <include layout="@layout/content_collapsible_toolbar"/>
        </android.support.v4.widget.NestedScrollView>

    The content which we need to display below the CollapsibleToolbarLayout can be included as separate layout which i’ve named as content_collapsible_toolbar.xml. 

  8. If you want you might just include a Floating Action Bar (FAB) along with our Collapsing Toolbar Layout, you can do with just a small addition of code:
    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_anchor="@id/app_bar_layout"
            app:layout_anchorGravity="bottom|right|end"
            app:srcCompat="@android:drawable/ic_menu_share"/>

    The app:layout_anchor attribute helps the FAB to anchor to whichever layout we specify. The app:layout_anchorGravity tag here is helping the FAB to stick to bottom right to appbar layout as shown in the demo.

    [widget id=”text-3″]

    The completed xml for our Collapsing Toolbar Layout is as follows:

    <?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:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.coderefer.collapsingtoolbarlayoutexample.CollapsingToolbarActivity">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/app_bar_layout"
            android:fitsSystemWindows="true"
            app:elevation="0dp"
            android:theme="@style/AppTheme.AppBarOverlay">
    
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/collapsing_toolbar"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways">
    
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="350dp"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:id="@+id/iv_detail"
                    android:src="@drawable/android_apple_fight"
                    app:layout_collapseMode="parallax"/>
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    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"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <include layout="@layout/content_collapsible_toolbar"/>
        </android.support.v4.widget.NestedScrollView>
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_anchor="@id/app_bar_layout"
            app:layout_anchorGravity="bottom|right|end"
            app:srcCompat="@android:drawable/ic_menu_share"/>
    </android.support.design.widget.CoordinatorLayout>
    

    In the upcoming tutorials, we will be discussing more on what’s more from Android Design Support Library.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Sunaina Bhadoria Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Sunaina Bhadoria
Guest
Sunaina Bhadoria

Gr8 work Sir………!