Design Support Library

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 :).

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.

OverviewApplication Overview

Text Input Layout Floating Action Button Snack bar Material Design Tab Navigation view Coordinator Layout With FAB Coordinator Layout With Appbar Enter Always Coordinator Layout With Appbar Enter Always Collapsed Coordinator Layout With Appbar Enter Until Collapsed Collapsing Toolbar Layout Pin Collapsing Toolbar Layout Parallax Indigo Theme Orange Theme Green Theme

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.

Text Input Layout

Code Snippet:

Text Input Layout XML code snippet
For handling Error text we need Java snippets shown below:

Text Input Layout Error code snippet
Few lines of code and magic happen. For complete code check 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.

Floating Action Button
Code Snippet:

Floating Action Button miniFloating Action Button normal
Few lines of code and magic happen. For complete code check 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.

Snack bar
Code Snippet:

Snack 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) .

Material Design Tab
Code Snippet:

Material Design Tab FixedMaterial Design Tab Scrollable
Few lines of code and magic happen. For complete code check in project.

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

Navigation view
Code Snippet:

Navigation view 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 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.

Coordinator Layout With FAB
Code Snippet:

Coordinator Layout with FAB xml code snippetCoordinator Layout with FAB java 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 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.

Coordinator Layout With Appbar Enter Always
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:

Coordinator Layout with AppBar Layout using enter always flagCoordinator Layout with AppBar Layout using enter always flag2
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.”

Coordinator Layout With Appbar Enter Always Collapsed
Code Snippet:

Enter Always Collapsed code snippet

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

Coordinator Layout With Appbar Enter Until Collapsed
Code Snippet:

Exit Until Collapsed code snippet
Few lines of code and magic happen. For complete code check 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.

Collapsing Toolbar Layout Pin

Code Snippet:

Collapsing Layout with pin flag.Collapsing layout with pin flag2

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.

Collapsing Toolbar Layout Parallax

Code Snippet:

Collapsing with parallax flag code snippet.Collapsing with Parllax flag2 code snippet.
Few lines of code and magic happen. For complete code check 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:

Indigo Theme
Code Snippet:

Indigo Theme code snippet

Orange Theme:

Orange 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 ‘ 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.




Facebooktwitterredditpinterestlinkedinmailby feather

8 thoughts on “Design Support Library

  1. Great job, bro. Can’t wait to implement these awesome material design patterns in my code. *thumbs up!*

  2. U r awesome. 🙂 Please add next page link at top of the content also. So v could move to next page rather than scrolling down every time to go to next page. 🙂

Leave a Reply

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

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