Android Material Design – Scroll and Collapsable App Bar

By | January 5, 2017

Material design has changed the way user interact with apps.

Below is one such UI design which we all will love.

We will create a collapsable AppBar which scrolls from center of the screen to the AppBar.

Check out the video below to see how it looks.

Make easy money with infolinks

All the magic happens in the XML layout.

So We will see how the layout looks like.

Material Design Layout


<?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"
    android:fitsSystemWindows="true"
    tools:context="mat_demo.ust.com.demo2.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        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"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

        </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"
        tools:context="mat_demo.ust.com.demo2.ScrollingActivity">

        <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.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

Make easy money with infolinks

Here the main properties are

  1. app:layout_scrollFlags=”scroll|exitUntilCollapsed” – This tells the toolbar to collapse to AppBar height.
  2. app:layout_behavior=”@string/appbar_scrolling_view_behavior” – This tell the NestedScrollView or Our Content to stay below the AppBar.
  3. app:layout_anchor=”@id/app_bar”
    app:layout_anchorGravity=”bottom|end”
    This tells the “FloatingActionButton” to anchor to the Toolbar/AppBar at the bottom end.

This is all that is needed to achieve the animation.
Make sure to check the video.

Leave a Reply

Your email address will not be published. Required fields are marked *