Make your inner designer happy
With THE design Support LibRARY
Anas Ambri
Android Montreal Meetup - January 2016
$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)
DEMO
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)
More references
Good CollapsingToolbarLayout implementation
Google DPE Chris Banes' demo project
Thank you!
Website: http://verybadalloc.com/
Twitter: @AnasAmbri
Slides: http://slides.com/anasambri/deck
On Android MTL SLACK TOO!