Mt vi gi lm app kiu Instagram

A couple months ago I started InstaMaterial series. The goal was simple - to prove that it is
pretty straightforward to implement all those fancy animations and UI effects showed in
Material Design guidelines. Now it becomes even easier - Google gave us Android Design
Support Library which provides all the most important UI elements introduced in Material
Design. In this post Id like to update InstaMaterial source code from custom views
implementantations to those provided by this library.

Before we start updating everything

Does design support library means that all code described here is out of date? Not at all.
Yes, its always better to use official implementations (is it?), especially with standard use
cases. Provided implementations mean also that someone cares about the code for us. We
dont have to think about Floating Action Button compatibillity between Kitkat, Lollipop
and M___. Thanks to this we save a lot of lines of code which can be used for even fancier
stuff (or just code becomes more readable).
But hey! There is one important thing - on the other side, there are also programmers like us.
They also make mistakes. They cannot predict all possible use cases. And what is very
important - sometimes is better to know what is under the hood - how things work from
scratch. Just for better understanding how system works.

Meet desing support library

Currently there is a lot of posts which describe new design support library:

Exploring the new Android Design Support Library

A couple of posts on Antonio Leivas blog
and probably much more

Thats why this post will be only a quick overview of transition things from custom
implementations to those provided by Design Support Library. By the way well see how
many lines of code well save.

NavigationView

Material design rules for default Navigation drawer are very clear. Now thanks to
NavigationView whole menu can be implemented in /res/menu/{filename}.xml file.
Instead of custom implementation of views hierarchy all we need to do is to use this code in
our Activity:
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/flContentRoot"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/vNavigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff"
app:headerLayout="@layout/view_global_menu_header"
app:itemIconTint="#8b8b8b"
app:itemTextColor="#666666"

app:menu="@menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>
view raw navigation_drawer.xml hosted with by GitHub
has two important properties: app:headerLayout and app:menu. First
one defines custom view layout which will be placed as a header of our navigation menu.
The second one defines resource which provides menu elements. This is how menu
implementation looks like in our app:
NavigationView

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/menu_group_1">
<item
android:id="@+id/menu_feed"
android:icon="@drawable/ic_global_menu_feed"
android:title="My Feed" />
<item
android:id="@+id/menu_direct"
android:icon="@drawable/ic_global_menu_direct"
android:title="Instagram Direct" />
<item
android:id="@+id/menu_news"
android:icon="@drawable/ic_global_menu_news"
android:title="News" />
<item
android:id="@+id/menu_popular"
android:icon="@drawable/ic_global_menu_popular"
android:title="Popular" />
<item
android:id="@+id/menu_photos_nearby"
android:icon="@drawable/ic_global_menu_nearby"
android:title="Photos Nearby" />
<item
android:id="@+id/menu_photo_you_liked"
android:icon="@drawable/ic_global_menu_likes"

android:title="Photos You've Liked" />

</group>
<group android:id="@+id/menu_group_2">
<item
android:id="@+id/menu_settings"
android:title="Settings" />
<item
android:id="@+id/menu_about"
android:title="About" />
</group>
</menu>
view raw drawer_menu.xml hosted with by GitHub
In our app we also defined BaseDrawerActivity which automatically adds navigation
drawer to every activity which inherits from it. Here is the source code of
BaseDrawerActivity.
Finally take a look at this commit. This is how much lines of code we saved. Custom
navigation drawer view, menu adapter and layouts became unnecessary.

Floating Action Button

Floating Action Button is probably the most recognizable UI element introduced in

Material Design guidelines. But until now its implementation wasnt so obvious. Circular
shape, shadow (also with curcular shape), ripple effect, elevations. Now everything is
provided by library. All we have to do is to put FloatingActionButton directly in .xml
layout file:
<android.support.design.widget.FloatingActionButton
android:id="@+id/btnCreate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="@dimen/btn_fab_margins"

android:layout_marginRight="@dimen/btn_fab_margins"
android:src="@drawable/ic_instagram_white"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
view raw fab.xml hosted with by GitHub
And thats all. We dont need two different drawables for Lollipop and older system
versions. Dont need to make workarounds for circular shadow etc. Until we dont want to
customize it in unusual way all is done for us.
It is worth mentioning that default implementation of FloatingActionButton has two sizes
- mini and normal (default) defined by: app:fabSize="mini" and app:fabSize="normal"
attributes.

CoordinatorLayout
This is something that many Android developers missed - especially those who worked with
interactive layouts. CoordinatorLayout is a new ViewGroup layout which help to
coordinate interaction between its subviews. In practice probably the most common use case
for it will be interaction between ScrollView and any other view(s). This is also what we
start with - we would like to hide Toolbar when feed scrolls down and show it for scroll up.

AppBarLayout
is another ViewGroup which can help us with this. It gives us a couple
default behaviors for toolbar which can be used to interact with any scroll view. Here is
sample views hierarchy which shows how we could use AppBarLayout in connection with
CoordinatorLayout:
AppBarLayout

<android.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvFeed"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="@dimen/default_elevation"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView
android:id="@+id/ivLogo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="center"
android:src="@drawable/img_toolbar_logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
view raw coordinator_layout.xml hosted with by GitHub
Here we have a couple important things:

app:layout_scrollFlags="scroll|enterAlways" in Toolbar means that this

child of AppBarLayout will react for scroll event (view will be scroll in direct

relation to scroll events) and view will scroll on any downwards scroll event (better
known as quick return pattern).
app:layout_behavior="@string/appbar_scrolling_view_behavior" in
RecyclerView means that this scroll view will send scrolling events to
AppBarLayout children.

Result

Easy, isnt it? Now check what else you can do with the rest of scrollFlags.

Snackbar

was introduced as a more mature Toast implementation. Its also used for short
messages but can be provided with additional action (e.g. Undo for current action).
Moreover it can interact with other views nested in CoordinatorLayout.
And the costruction is as simple as in Toast:
Snackbar

public void showLikedSnackbar() {

Snackbar.make(clContent, "Liked!", Snackbar.LENGTH_SHORT).show();
}
view raw Snackbar.java hosted with by GitHub
First parameter of make() method is view to find a parent from. It means that Snackbar will
walk up the view tree trying to find a suitable parent. If it will be CoordinatorLayout
Snackbar will be able to interact with e.g. FloatingActionButton. Also it will become
dismissable by swipe.

TabLayout

Finally Google gives us modern implementation for tabbar - with horizontal scroll, icons or
texts, easy tab indicator customization, gravity for tabs, ripple effects etc. And this is
TabLayout, nothing more, nothing else:

<android.support.design.widget.TabLayout
android:id="@+id/tlUserProfileTabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorAccent"
app:tabGravity="fill"
app:tabIndicatorColor="#5be5ad"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed" />
view raw tab_layout.xml hosted with by GitHub
private void setupTabs() {
tlUserProfileTabs.addTab(tlUserProfileTabs.newTab().setIcon(R.drawable.ic_grid_on_whit
e));
tlUserProfileTabs.addTab(tlUserProfileTabs.newTab().setIcon(R.drawable.ic_list_white));
tlUserProfileTabs.addTab(tlUserProfileTabs.newTab().setIcon(R.drawable.ic_place_white))
;
tlUserProfileTabs.addTab(tlUserProfileTabs.newTab().setIcon(R.drawable.ic_label_white));
}
view raw TabLayout.java hosted with by GitHub

CollapsingToolbarLayout
At the end well take a look at CollapsingToolbarLayout. Since Toolbar is more generic
solution than old ActionBar there are a lot of ui effects connected with this view - parallax,
dynamic title size and position, expanding/collapsing content and much more. And in short
this is what CollapsingToolbarLayout gives us.
One more time it is all about proper .xml layout configuration - no Java code at all.
Here is the implementation which replaces our UserProfileAdapter (irrevelant lines were
hidden):
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="@+id/vUserProfileRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_collapseMode="parallax">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tlUserProfileTabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorAccent"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
view raw collapsing_toolbar_layout.xml hosted with by GitHub

Full source code of activity_user_profile.xml is available here.

Important things?

means that not pinned

children will be collapsed until we scroll to the top. Pinned views (our Toolbar with
app:layout_collapseMode="pin") will remain untouched.
app:layout_collapseMode="parallax" causes that our view will be collapsed in
Parallax-way. app:contentScrim="?attr/colorPrimary" in
CollapsingToolbarLayout means that collapsed view will be covered by this
particular color.
app:layout_scrollFlags="scroll|exitUntilCollapsed"

Now take a look at the final effect:

And this is all for today. Weve just updated InstaMaterial with new views and effects like
and

Snackbar, FloatingActionButton, TabLayout, CoordinatorLayout, AppBarLayout

CollapsingToolbarLayout. All of them were provided from Android Design Support

Library.
##Source code
Full source code of described project is available on Github repository.
###Author
Miroslaw Stanek