Materialize Your App with Design Support Library

In this talk, I do a quick look at Material design basic concepts and explain what you need to create Android Apps based on these guidelines, by using the Material Theme. After that, I talk about all the components you can find inside de Design Support Library and how to use them.

This talk was given to Madrid Android Developers Group.

Transcript

1. Materialize your App with Design Support Library Antonio Leiva @lime_cl contact@antonioleiva.com
2. http://plex.tv
3. http://antonioleiva.com
4. http://devexperto.com
5. http://antonioleiva.com/book/ Kotlin for Android Developers • Create App from scratch • Step by step • Complete Kotlin coverage • Updated to latest version
6. http://antonioleiva.com/book/ Kotlin for Android Developers • Create App from scratch • Step by step • Complete Kotlin coverage • Updated to latest version
7. http://materialdoc.es http://materialdoc.com
8. What is Material Design? Material is the metaphor graphic and bold Meaningful motion
9. What is Material Design? Paper and Ink
10. What is Material Design? Elevation and shadows
11. What is Material Design? Tools for Android • Material Theme (5.0+ y AppCompat) • Design Support Library • Otras librerías útiles
12. Goal • Create an App using all the tools from Design Support Library
13. Material Theme colorPrimary colorPrimaryDark colorAccent
14. Material Theme <style name="AppTheme" parent="Theme.AppCompat">
 <item name="colorPrimary">@color/primary</item>
 <item name="colorPrimaryDark">@color/primary_dark</item>
 <item name="colorAccent">@color/accent</item>
 <item name="android:textColorPrimary">@color/primary_text</item>
 <item name="android:textColorSecondary">@color/secondary_text</item>
 <item name="colorControlHighlight">@color/primary_light</item>
 </style>
15. Toolbar http://www.google.com/design/spec/layout/structure.html#structure-toolbars
16. Toolbar <style name=“AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 …
 </style> Theme without ActionBar (we’ll add it manually)
17. Toolbar Include Toolbar in your layout <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="?attr/colorPrimary"
 android:theme="@style/AppTheme.ToolbarOverlay"
 app:popupTheme="@style/AppTheme.PopupOverlay"/>
18. Toolbar Themes for Toolbar and menus <style name="AppTheme.ToolbarOverlay" 
 parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
 
 <style name="AppTheme.PopupOverlay" 
 parent="ThemeOverlay.AppCompat.Light"/>
19. Toolbar Assign Toolbar as the Action Bar @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 } Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);
20. Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9.TextInputLayout 10. Custom Behaviors
21. Introduction
22. Introduction dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile ‘com.android.support:appcompat-v7:23.1.1' compile ‘com.android.support:design:23.1.1’
 }
23. Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9.TextInputLayout 10. Custom Behaviors
24. FloatingActionButton
25. FloatingActionButton <android.support.design.widget.FloatingActionButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentEnd="true"
 android:layout_margin="@dimen/spacing_large"
 android:src="@android:drawable/ic_dialog_email"
 app:fabSize="normal"/>
26. FloatingActionButton
27. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
28. SnackBar • Toast substitution • More contextual • A message • An optional action button • Fixed or hides automatically
29. SnackBar Snackbar.make(container, "Fab Clicked", Snackbar.LENGTH_LONG).show(); Snackbar.make(container, "Fab Clicked", Snackbar.LENGTH_INDEFINITE) .setAction(…) .show(); Snack that hides automatically Indefinite snack with an action
30. SnackBar
31. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
32. NavigationView • Simplifies side navigation • Header • Menu • Actions that can be selected
33. NavigationView • Drawer Layout <android.support.v4.widget.DrawerLayout
 android:id="@+id/drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true">
 
 <include layout="@layout/activity_main_content"/>
 
 <android.support.design.widget.NavigationView
 … />
 
 </android.support.v4.widget.DrawerLayout> drawer.openDrawer(gravity); drawer.closeDrawer(gravity); drawer.closeDrawers();
34. NavigationView <android.support.design.widget.NavigationView
 android:id="@+id/navigation_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 app:menu="@menu/main_navigation"/> • Menu: an XML menu can be used
35. NavigationView <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 
 <item
 android:id="@+id/item1"
 android:icon="@android:drawable/ic_popup_reminder"
 android:title="@string/item1"/>
 
 <item
 android:id="@+id/item2"
 android:icon="@android:drawable/ic_dialog_dialer"
 android:title="@string/item2"/>
 
 <item
 android:id="@+id/item3"
 android:icon="@android:drawable/ic_dialog_map"
 android:title="@string/item3"/>
 
 <item
 android:id="@+id/settings"
 android:icon="@android:drawable/ic_dialog_info"
 android:title="@string/settings"/>
 
 </menu>
36. NavigationView <group android:checkableBehavior="single">
 <item …/> <item …/> <item …/>
 </group> <item android:title="@string/settings">
 <menu>
 <item …/> <item …/>
 </menu>
 </item> Selectable items Section with title
37. NavigationView <android.support.design.widget.NavigationView
 android:id="@+id/navigation_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 app:menu=“@menu/main_navigation" app:headerLayout=“@layout/navigation_header"/> Header
38. NavigationView <style name="AppTheme" parent="AppTheme.Base">
 <item name="android:windowDrawsSystemBarBackgrounds">true</item>
 <item name="android:statusBarColor">@android:color/transparent</item>
 </style> Translucent status bar values-v21 <android.support.v4.widget.DrawerLayout
 …
 android:fitsSystemWindows="true">
39. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
40. TabLayout <android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:theme="@style/AppTheme.DarkOverlay"/> // Listener for the pager
 pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));
 
 // Tabs titles based on pager
 tabs.setupWithViewPager(pager);
41. TabLayout app:tabMode=“fixed” (default) app:tabMode=“scrollable”
42. 3 Design Support Library 1. Introducción 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
43. CoordinatorLayout • Coordinates its children through behaviors
44. CoordinatorLayout <android.support.design.widget.CoordinatorLayout
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 …
 
 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom|end"
 android:layout_margin="@dimen/spacing_large"
 android:src="@android:drawable/ic_dialog_email"
 app:fabSize="normal"/>
 
 </android.support.design.widget.CoordinatorLayout>
45. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
46. AppBarLayout • Works like a Linear Layout with complex configurations for scroll <android.support.design.widget.AppBarLayout
 android:id="@+id/toolbar_layout"
 …>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 style="@style/AppTheme.Widget.Toolbar"
 app:layout_scrollFlags="scroll|enterAlways"/>
 
 <android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 …/>
 
 </android.support.design.widget.AppBarLayout>
47. AppBarLayout “layout_scrollFlags” coordinates what view will do on scroll • scroll: follows the scroll. • enterAlways: reappears on scroll up. • snap: animates view when partially hidden. • exitUntilCollapsed: with CollapsingToolbarLayout, collapses until is out. • enterAlwaysCollapsed: like enterAlways, with CollapsingToolbarLayout.
48. AppBarLayout Behaviour on the view we want to observe scroll from. <android.support.v4.view.ViewPager
 android:id="@+id/pager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
49. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
50. CollapsingToolbarLayout • Collapses a big Toolbar up to the regular size. • Parallax mode can be used for background images.
51. CollapsingToolbarLayout <android.support.design.widget.AppBarLayout>
 
 <android.support.design.widget.CollapsingToolbarLayout>
 
 <ImageView />
 
 <android.support.v7.widget.Toolbar />
 
 </android.support.design.widget.CollapsingToolbarLayout>
 
 </android.support.design.widget.AppBarLayout>
52. CollapsingToolbarLayout <android.support.design.widget.CollapsingToolbarLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:contentScrim="?attr/colorPrimary"
 app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
 <ImageView …
 android:fitsSystemWindows="true"
 app:layout_collapseMode="parallax"/>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 tools:src="@mipmap/ic_launcher"/>
 
 </android.support.design.widget.CollapsingToolbarLayout>
53. CollapsingToolbarLayout <android.support.v4.widget.NestedScrollView
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"> NestedScrollView es a ScrollView ready to work with CoordinatorLayout (support-v4)
54. CollapsingToolbarLayout <android.support.design.widget.FloatingActionButton
 …
 app:layout_anchor="@id/collapsing_toolbar"
 app:layout_anchorGravity="bottom|end"/>
55. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
56. TextInputLayout <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:hint="@string/description">
 
 <EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"/>
 
 </android.support.design.widget.TextInputLayout>
57. 3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors
58. 3.10 Custom Behaviors Define how a View behaves inside a CoordinatorLayout on scroll events.
59. 3.10 Custom Behaviors • onStartNestedScroll: When scroll starts, it decides whether we’ll consume the event. • onNestedScroll: if we returned true on previous, this will be called during scroll. • layoutDependsOn: return true if this behaviour depends on the view received as parameter. For instance, FAB depends on Snackbar. • onDependentViewChanged: if we returned true on previous, this will be called when those views change. Most important methods on Custom Behaviours
60. 3.10 Custom Behaviors public final class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
 
 public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
 }
 
 @Override
 public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
 return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
 }
 
 @Override
 public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
 if (dyConsumed > 0) {
 child.hide();
 } else if (dyConsumed < 0) {
 child.show();
 }
 }
 }
61. 3.10 Custom Behaviors
62. Animations Luis G. Valle http://lgvalle.xyz/2015/06/07/material-animations/ https://speakerdeck.com/lgvalle/material-animations-show-me-the-code-codemotion-2015
63. ?