Introducing the Android Design Support Library

Slides of the talk "Introducing the
Android Design Support Library" I gave at GDG Milano.

Transcript

1. Introducing the Android Design Support Library Riccardo Ciovati / GDG Milano
2. Agenda ➔ Overview of the Android Design Support Library (~30m) ➔ Live Demo: Building a simple Material-style app with AppCompat and Design Support Library (~45m) ➔ Q&A - Discussion (~15m)
3. What is the DSL? ➔ A set of components which aim to help developers building Material applications ➔ Backcompatible to Android 2.1 (don’t do that, minSdkVersion="16" FTW) ➔ To be used with the AppCompat Library ➔ First version, expect bugs!
4. Getting Started It all begins with the Gradle dependency: dependencies { compile 'com.android.support:design:22.2.0' } build.gradle
5. FloatingActionButton Floating action buttons are used for a promoted action. Guideline page: http://goo.gl/Pw9Twn ➔ Comes in two sizes: ◆ Default: 56dp ◆ Mini: 40dp ➔ Interface Button-like
6. SnackBar Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action. Guideline page: http://goo.gl/QyMXXR Interface Toast-like
7. TextInputLayout Widget for building Material text fields. Guideline page: http://goo.gl/wazbxZ ➔ Provides support for: ◆ Floating labels ◆ Display errors
8. TextInputLayout layout/activity_text_input_layout.xml surnameInputLayout.setError("Can't be empty!"); <android.support.design.widget.TextInputLayout android:id="@+id/surname_input_layout" app:errorEnabled="true" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/surname_edit_text" android:hint="@string/surname_hint" android:layout_width="match_parent" android:layout_height="wrap_content"/> </android.support.design.widget.TextInputLayout> TextInputLayoutActivity.java
9. NavigationView Widget for implementing the Navigation Drawer pattern. Guideline page: http://goo.gl/sZZz3N ➔ To be used with DrawerLayout ➔ Handles items positioning and styling
10. NavigationView <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- content --> <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:headerLayout="@layout/layout_navigation_view_header" app:menu="@menu/navigation_view_items"/> </android.support.v4.widget.DrawerLayout> layout/activity_navigation_view.xml
11. NavigationView <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- content --> <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:headerLayout="@layout/layout_navigation_view_header" app:menu="@menu/navigation_view_items"/> </android.support.v4.widget.DrawerLayout> layout/activity_navigation_view.xml
12. NavigationView <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@drawable/ic_action_grade" android:title="@string/navigation_item_1"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_action_grade" android:title="@string/navigation_item_2"/> </group> <item android:id="@+id/navigation_subheader" android:title="@string/navigation_subheader"> <menu> <item android:id="@+id/navigation_sub_item_1" android:icon="@drawable/ic_action_grade" android:title="@string/navigation_sub_item_1"/> <item android:id="@+id/navigation_sub_item_2" android:icon="@drawable/ic_action_grade" android:title="@string/navigation_sub_item_2"/> </menu> </item> </menu> menu/navigation_view_items.xml
13. NavigationView public class NavigationViewActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_navigation_view); //Setup NavigationView nv = (NavigationView) findViewById(R.id. navigation_view); nv.setNavigationItemSelectedListener(this); } @Override public boolean onNavigationItemSelected(MenuItem menuItem) { menuItem.setChecked(true); Toast.makeText(this, menuItem.getTitle(),Toast.LENGTH_SHORT).show(); return true; } } menu/navigation_view_items.xml
14. TabLayout Helps you creating a Material tabs: Guideline page: http://goo.gl/Jpsqd4 ➔ Play nicely with ViewPager ➔ Different type of tabs: ◆ Scrollable ◆ Fixed
15. TabLayout <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" app:tabMode="scrollable" app:tabIndicatorColor="@android:color/white" android:background="?colorPrimary" android:layout_height="wrap_content" android:layout_width="match_parent"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:background="@color/light_grey" android:layout_height="0dp" android:layout_weight="1" android:layout_width="match_parent"/> </LinearLayout> layout/activity_tab_layout.xml
16. TabLayout @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); DummyAdapter adapter = new DummyAdapter (getSupportFragmentManager()); ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(adapter); final Resources res = getResources(); int normalColor = res.getColor(R.color.dark_grey); int selectedColor = res.getColor(android.R.color.white); TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.setTabTextColors(normalColor, selectedColor); tabLayout.setupWithViewPager(viewPager); } layout/activity_tab_layout.xml
17. TabLayout @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); DummyAdapter adapter = new DummyAdapter (getSupportFragmentManager()); ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(adapter); final Resources res = getResources(); int normalColor = res.getColor(R.color.dark_grey); int selectedColor = res.getColor(android.R.color.white); TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.setTabTextColors(normalColor, selectedColor); tabLayout.setupWithViewPager(viewPager); } layout/activity_tab_layout.xml
18. CoordinatorLayout “CoordinatorLayout is a super-powered FrameLayout.” ➔ Coordinate the interaction between CoordinatorLayout’s children by using/defining Behaviours ➔ Anchor views to other CoordinatorLayout’s children
19. CoordinatorLayout.Behaviour ➔ Define which views a view depends on and how to react when those views change ➔ A few implementation available in the DSL: ◆ AppBarLayout.ScrollingViewBehavior ◆ SwipeDismissBehavior ➔ Build your own for custom views or custom logic
20. Example: FloatingActionButton.Behaviour Goal: Translate the FAB so that it won’t be covered by the SnackBar. ➔ This is actually already implemented but it’s a nice example to understand the mechanism.
21. Example: FloatingActionButton.Behaviour public class ExampleBehaviour extends Behavior<FloatingActionButton> { @Override public boolean layoutDependsOn(final CoordinatorLayout parent, final FloatingActionButton child, final View dependency) { return dependency instanceof Snackbar.SnackbarLayout; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { if (dependency instanceof Snackbar.SnackbarLayout) { float dependencyTranslationY = ViewCompat.getTranslationY(dependency); float translationY = Math.min(0, dependencyTranslationY - dependency.getHeight()); ViewCompat.animate(child).translationY(translationY); return true; } return false; } }
22. Example: FloatingActionButton.Behaviour public class ExampleBehaviour extends Behavior<FloatingActionButton> { @Override public boolean layoutDependsOn(final CoordinatorLayout parent, final FloatingActionButton child, final View dependency) { return dependency instanceof Snackbar.SnackbarLayout; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { if (dependency instanceof Snackbar.SnackbarLayout) { float dependencyTranslationY = ViewCompat.getTranslationY(dependency); float translationY = Math.min(0, dependencyTranslationY - dependency.getHeight()); ViewCompat.animate(child).translationY(translationY); return true; } return false; } }
23. Example: FloatingActionButton.Behaviour How do I use my own defined behaviour? ➔ Annotate your custom view with @DefaultBehavior(ExampleBehavior.class) ➔ In the layout file: app:layout_behavior=”package.ExampleBehavior” More complex example by Ian Lake: https://goo.gl/nT34cD
24. Anchoring <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:id="@+id/top"/> <View android:id="@+id/bottom"/> </LinearLayout> <android.support.design.widget.FloatingActionButton app:layout_anchor="@id/top" app:layout_anchorGravity="bottom|end"/> </android.support.design.widget.CoordinatorLayout> layout/activity_fab.xml
25. AppBarLayout Helps you implementing various scrolling techniques, as shown in the guideline: http://goo.gl/JzqUbo Scrolling widgets must implement the NestedScrollingChild interface: ➔ RecyclerView ➔ NestedScrollView
26. AppBarLayout - Basic <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView app:layout_behavior="@string/appbar_scrolling_view_behavior" android:id="@+id/recyler_view"/> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent"> <android.support.v7.widget.Toolbar app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/toolbar" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> layout/activity_fab.xml
27. AppBarLayout - Scrolling flags enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
28. AppBarLayout - Scrolling flags enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
29. AppBarLayout - Scrolling flags exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
30. CollapsingToolbarLayout CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar.
31. Demo Apps ➔ Cheesesquare: https://github. com/chrisbanes/cheesesquare ➔ Slides code: https://github.com/rciovati/design-library- demo
32. References & Links ➔ Android Developers blog: http://goo.gl/g0ZoSA ➔ “Exploring the new Android Design Support Library”: https://goo. gl/R4KsSL ➔ Serie by Styling Android: http://goo.gl/6pZOMA ➔ Serie by Antonio Leiva: http://goo.gl/RCGylx ➔ “Introduction to CoordinatorLayout”: https://goo.gl/TuJJ1z ➔ “androiddesignsupport” StackOverflow tag