Slide used in I/O Rewind 2015 Bangkok related to Android Design Support Library

1. Android Design Support
Library
nuuneoi

2. android.support.design.widget.FloatingActionButton
android:fabSize – normal (56dp), mini (40dp)
android:src – Icon’s resource
android:backgroundTint – Background color (accent
color will be used if not set)
There is some bug on API Level 21+ (Lollipop)
Floating Action Button (FAB)

3. android.support.design.widget.Snackbar
Just like a Toast
Snackbar.make(rootLayout, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
})
.show();
Snackbar

4. CoordinatorLayout
building dependencies between sibling views and allowing easy
scrolling reactions between components
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Place Views Inside -->
</android.support.design.widget.CoordinatorLayout

5. AppBarLayout
a container for Toolbar to make it fit in CoordinatorLayout
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.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"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<!-- Other views -->
</android.support.design.widget.CoordinatorLayout>

6. CoordinatorLayout’s Content
You need to apply
app:layout_behavior="@string/appbar_scrolling_view_behavior"
to the content view inside Coordinator or it will be placed at
the same position as where Toolbar is

7. CoordinatorLayout’s Content
<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout ...>
...
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical“
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

8. TabLayout
You could place tabs easily with TabLayout. Support for both
fixed and scrollable. Also works with ViewPager.
<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout ...>
<android.support.v7.widget.Toolbar .../>
<android.support.design.widget.TabLayout
android:id=“@+id/tabLayout”
android:layout_width="match_parent“ android:layout_height="match_parent" />
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>

9. TabLayout
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
To manually add Tab(s)

10. TabLayout
Parameters:
app:tabMode – fixed (all tabs are shown concurrently)
– scrollable (show a subset of tabs)
app:tabGravity – fill (distribute all available space)
– center (position tabs in the center of
TabLayout)

11. CollapsingToolbarLayout
Make Toolbar collapsible

12. CollapsingToolbarLayout
Simply wrap Toolbar with this layout
<android.support.design.widget.AppBarLayout ...>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent“ android:layout_height="match_parent“
app:contentScrim=“?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
app:layout_collapseMode=“pin“ .../>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

13. CollapsingToolbarLayout
Toolbar’s background is recommended to be removed
You can place another View inside at the same approach as
FrameLayout. Also with parallax support.
<android.support.design.widget.CollapsingToolbarLayout ...>
<ImageView
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7“
...>
<android.support.v7.widget.Toolbar .../>
</android.support.design.widget.CollapsingToolbarLayout>

14. NavigationView
Implementing Navigation Drawer
contents in very easy way

15. NavigationView
Define XML Layout for Header View
res/layout/nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_margin="16dp"
android:text="nuuneoi"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</FrameLayout>

16. NavigationView
Define XML for Menu Items
res/menu/navigation_drawer_items.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group android:checkableBehavior="all">
<item
android:id="@+id/navigation_item_1"
android:icon="@drawable/ic_action_location_found_dark"
android:title="Toolbar"/>
<item
android:id="@+id/navigation_item_2"
android:icon="@drawable/ic_action_location_found_dark"
android:title="FloatActionButton"/>
<item
android:id="@+id/navigation_item_3"
android:icon="@drawable/ic_action_location_found_dark"
android:title="NavigationView"/>
</group>
</menu>

17. NavigationView
Place NavigationView as navigation drawer of DrawerLayout
</android.support.v4.widget.DrawerLayout ...>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:itemIconTint="#333"
app:itemTextColor="#333"
app:menu="@menu/navigation_drawer_items" />
</android.support.v4.widget.DrawerLayout>

18. NavigationView
Result

19. TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username" />
</android.support.design.widget.TextInputLayout>
Wrap EditText with this layout to make hint and error text
shown as floating labels

20. Thank You
Q&A