$WHOAMI

Android & iOS developer at Guaraná

Website: http://verybadalloc.com/

Twitter: @AnasAmbri

Slides: http://slides.com/anasambri/deck

Shameless PLug

At Guaraná, we make Android & iOS apps

Website: http://guarana-technologies.com/

We are also hiring!

ONTO the Good stuff

Meet DesignSupportLibraryDemo (name pending trademark)

OUTLINE

• Integrate Material design elements
  • NavigationView
  • TabLayout
  • AppBarLayout
  • CoordinatorLayout
  • FAB
  • Snackbar
  • CollapsingToolbarLayout (will be left as an exercise to the reader)
• Live on screen
• But wait, there is more!

NO RaGReTs

For the sake of completeness, we support SDK=7 (do not try this at home)

• Testing on a SE Xperia 8 (SDK = 10)

Review - Navigation View

• NavigationView is a subclass of FrameLayout
• Used usually inside DrawerLayout
• Material Design spec

Review - Navigation View(2)

• Styleables include:
  • app:menu -> static menu
  • app:headerLayout -> required
  • android:background -> Drawable
  • android:maxWidth -> size
  • app:itemBackground -> Drawable
  • app:itemIconTint
  • app:itemTextAppearance
  • app:itemTextColor

Review - Tab Layout

• Tab Layout is a subclass of HorizontalScrollView
• Always use it with a ViewPager (when unknown number of tabs)

Review - Tab Layout(2)

Styleables include:

• app:tabMode="fixed||scrollable"
• app:tabIndicatorColor
• app:tabIndicatorHeight
• app:tabPaddingStart/End/Top/Bottom
• app:tabTextAppearance
• app:tabTextColor
• app:tabSelectedTextColor

Review - Appbar Layout

• AppBarLayout is a subclass of LinearLayout
• Always use it as a direct child of a CoordinatorLayout
• Always have a sibling view that implements the behavior AppBarLayout.ScrollingViewBehavior (we did it in xml using app:layout_behavior

Review - Appbar Layout (2)

Important: some sibling views do not implement the scrolling view behavior.

• RecyclerView and ViewPager do
• WebView does not (thanks to Mark Allison)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</android.support.v4.widget.NestedScrollView>

Review - Coordinator Layout

• CoordinatorLayout is a subclass of FrameLayout
• Its purpose is to coordinate interaction between its children 
• Useful for:
  • AppBarLayout/NestedScrollView 
  • Snackbar/FAB 

Review - Floating Action Button

• FloatingActionButton is a subclass of ImageButton
• Always have a CoordinatorLayout around, to avoid Snackbar covering it

Final Result (on 6.0.1)

Final Result (on 2.3.5)

Final Result (on 2.3.5)