Introducing the Android Design Support Library Riccardo Ciovati / GDG Milano 

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) 

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! 

Getting Started It all begins with the Gradle dependency: dependencies { compile 'com.android.support:design:22.2.0' } build.gradle 

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 

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 

TextInputLayout Widget for building Material text fields. Guideline page: http://goo.gl/wazbxZ ➔ Provides support for: ◆ Floating labels ◆ Display errors 

TextInputLayout layout/activity_text_input_layout.xml surnameInputLayout.setError("Can't be empty!"); TextInputLayoutActivity.java 

NavigationView Widget for implementing the Navigation Drawer pattern. Guideline page: http://goo.gl/sZZz3N ➔ To be used with DrawerLayout ➔ Handles items positioning and styling 

NavigationView layout/activity_navigation_view.xml 

NavigationView layout/activity_navigation_view.xml 

NavigationView menu/navigation_view_items.xml 

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 

TabLayout Helps you creating a Material tabs: Guideline page: http://goo.gl/Jpsqd4 ➔ Play nicely with ViewPager ➔ Different type of tabs: ◆ Scrollable ◆ Fixed 

TabLayout layout/activity_tab_layout.xml 

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 

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 

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 

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 

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. 

Example: FloatingActionButton.Behaviour public class ExampleBehaviour extends Behavior { @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; } } 

Example: FloatingActionButton.Behaviour public class ExampleBehaviour extends Behavior { @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; } } 

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 

Anchoring layout/activity_fab.xml 

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 

AppBarLayout - Basic layout/activity_fab.xml 

AppBarLayout - Scrolling flags enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern 

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. 

AppBarLayout - Scrolling flags exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting 

CollapsingToolbarLayout CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. 

Demo Apps ➔ Cheesesquare: https://github. com/chrisbanes/cheesesquare ➔ Slides code: https://github.com/rciovati/design-library- demo 

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