U Want To Learn

Wow. An awesome day.
Hi friends. Now today we will learn Android Design Support Library. Many developers currently confused how we can make our apps like we see in Google IO in which we see lot of animations like parallax, action bar animation with list, etc. So today after reading this post you will be more confident about material design and all of your confusions will be gone :).

Motivation:
In this post I have a lot of motivation for you guys in form of images. So you need to scroll down and see all images without thinking how we can write code for this type of applications. Then if you feel you want to learn how we can achieve these things in android you can start reading and good news is I have a complete code for you guys on git. So you easily grasp these concepts with code example.

Application Overview

             

Introduction:
Now I know after seeing above images you are curious to learn how we can achieve these Animations in our app. So now I am starting all widgets explanation one by one.

Text Input Layout:
In this widget hint of a EditText automatically manage as floating text. Also we can add validation errors text around the EditText.


Code Snippet:


For handling Error text we need Java snippets shown below:

Few lines of code and magic happen. For complete code check TextInputLayoutActivity.java in project.

Floating Action Button:
In this widget we have Floating button in app. It always show as a elevated means above on all widgets.It support two sizes with property name fabSize. First is mini & second is normal.

Code Snippet:

Few lines of code and magic happen. For complete code check FloatingActionButtonActivity.java in project.

Snack Bar:
In this widget we have a time limited bar. We can cancel this or we can add some action on this bar.

Code Snippet:

There are many customize able properties available. You can check Developer Doc.

Material Design Tab:
Tabs are not the new concept in Design Library. Instead in Design Library they add two types fixed (Fixed tabs have equal width) and scroll able (display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs than fixed tabs) .

Code Snippet:

Few lines of code and magic happen. For complete code check MaterialDesignTabActivity.java in project.

Navigation View:
This is a view which shown when user swipe from screen left to right. We use this with Drawer widget.

Code Snippet:

To use this view we need to add gravity property in Navigation widget android:layout_gravity=”start”.  We have also one optional property its name is app:headerLayout. This manage the header in NavigationView. app:menu property is used to inflate menu resource for NavigationView. Few lines of code and magic happen. For complete code check NavigationViewActivity.java in project.

Coordinator Layout with FAB:
Before start on this. We need to know little bit about Coordinator Layout. “A layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.” In simple words Coordinator Layout is awesome that can manage many animations functionality on its own.

Now if we are using Floating Action Button and we have a Snack bar. Then Snack bar will occur on above of FAB. If we want our FAB will manage its position relative to Snack bar on run time we use Coordinator Layout.

Code Snippet:

Only we need to give Coordinator Layout reference to Snackbar and all other things will manage by Layout. Few lines of code and magic happen. For complete code check CoordinateLayoutWithFloatingActionButtonActivity.java in project .

Coordinator Layout with App Bar Layout:
Coordinator Layout and App Bar Layout allows your Toolbar and other views to react to scroll events with a ScrollinViewBehavior.

As you see in above image we have Toolbar and Tab, when we scroll, our Toolbar scroll and as my Tab reach on top its stop there. We have different flags to get different type of behavior on Scrolling. But before that we need to see code snippet of above behavior.

Code Snippet:

Great news is there is no java code require. Only above code will give you same scrolling effect which you already see in above image. Some important points. We need a some scrolling widget in Coordinator Layout with property  app:layout_behavior=”@string/appbar_scrolling_view_behavior”. Then the view which we want to show some animation on scrolling event, in that view we need to add a property app:layout_scrollFlags. There are different values available for this flag to get different scrolling behaviors. In above code we use a scroll|enterAlways value flag.

Enter Always:
“This flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern”

Enter Always Collapsed:
“When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.”

Code Snippet:

Exit Always Collapsed:
“This flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting”

Code Snippet:

Few lines of code and magic happen. For complete code check CoordinatorLayoutWithAppBar.java in project.

Collapsing Toolbar Layout:
“Adding a Toolbar directly to an AppBarLayout gives you access to the enterAlwaysCollapsed and exitUntilCollapsed scroll flags, but not the detailed control on how different elements react to collapsing. For that we use CollapsingToolbarLayout”.
There are two use cases basically we have two flags which we use to get different behavior on Scroll. First is pin flag and second is parallax flag.

Pin Flag:
Pin flag ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses.

Code Snippet:

Parallax Flag:
Parallax flag pairs with app:ccontentScrim=”color/blue” attribute for CollaspsingToolbarLayout. In this if we are using ImageView as a sibling of ColllapsingToolbarLayout and below that we are using Toolbar with parallax flag then we scroll, our image and toolbar both hide with parallax animation and our title will be the part of the top of the screen.

Code Snippet:

Few lines of code and magic happen. For complete code check CollapsingToolbarLayoutActivity.java in project.

Bonus Material Design Theme:
Now here I am showing you how easily we can change our Material theme of complete application.
Indigo Theme:

Code Snippet:


Orange Theme:

Code Snippet:

Few lines of code and magic happen. For complete code check styles.xml and colors.xml  in project.
To get all these functionalities you need add dependency in your build.gradle.
compile ‘com.android.support:design:(latest version)’

I hope you enjoy this post. Now I feel you are motivated and confident because now you know  there is no magic to make your apps experience awesome. OK Guys bye. We will meet in next post.
You can get application code from Github.

 

 

 

by