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.
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>
Here the main properties are
- app:layout_scrollFlags=”scroll|exitUntilCollapsed” – This tells the toolbar to collapse to AppBar height.
- app:layout_behavior=”@string/appbar_scrolling_view_behavior” – This tell the NestedScrollView or Our Content to stay below the AppBar.
- 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.