Material Design in Android

A deep dive into the Material Design system. Covering the design principles, applying them to your app and how to build them using the new Android Design Support Library and others APIs

Transcript

1. @Mr_Esti Material Design in Android
2. Material Design implementing & compatibilizing - Concepts - Animations - Style - Layout - Components - Patterns - Compatibility - Design Suppory Library
4. Concepts Material is the metaphor
5. Print-like design
7. Constrained depth
8. Physical properties
9. Constrained depth
11. @_saulmm AppCompat dependencies { compile ’com.android.support:appcompat-v7:22.2.0’ compile ’com.android.support:cardview-v7:22.2.0’ compile ’com.android.support:recyclerview-v7:22.2.0’ compile ’com.android.support:design:22.2.0’ }
12. <android.support.v7.widget.Toolbar android:layout_height="wrap_content" android:layout_width="match_parent" android:background="?android:colorPrimary" android:minHeight="?attr/actionBarSize" android:elevation="5dp" /> <android.support.v7.widget.CardView android:layout_width="100dp" android:layout_height=“96dp" android:layout_gravity="center" android:stateListAnimator="@drawable/translation_selector" android:clickable=“true" android:elevation="2dp" card_view:cardCornerRadius="4dp" />
13. <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="10dp" android:valueType="floatType"/> </set> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="2dp" android:valueType="floatType"/> </set> </item> </selector>
16. Concepts Motion provides meaning
17. // After transition mFab.animate() .scaleX(1).scaleY(1) .start(); // After fab mToolbar.animate() .scaleX(0).scaleY(1) .start(); // After toolbar mContent.animate() .scaleX(0).scaleY(1) .start();
19. // Slide awesomeTransition = new Slide (Gravity.BOTTOM); // Fade awesomeTransition = new Fade (); Explode awesomeTransition = new Explode(); awesomeTransition.excludeTarget(android.R.id.navigationBarBackground, true); awesomeTransition.excludeTarget(android.R.id.statusBarBackground, true); awesomeTransition.excludeTarget(R.id.activity_transition_header, true); getWindow().setExitTransition(awesomeTransition); Slide Explode Fade
20. Concepts Bold, graphic, intentional
21. <style name=“AwesomeTheme" parent=“AppTheme"> <item name=“android:colorPrimary”>@color/my_primary</item> <item name=“android:colorAccent">@color/my_accent</item> </style> <style name=“AwesomeTheme" parent=“AppTheme"> <item name=“colorPrimary”>@color/my_primary</item> <item name=“colorAccent">@color/my_accent</item> </style> colorAccent
23. public class MovieDetailActivity extends Activity implements Palette.PaletteAsyncListener { ... @Override public void onGenerated(Palette palette) { if (palette != null) { Palette.Swatch vibrantSwatch = palette .getVibrantSwatch(); Palette.Swatch darkVibrantSwatch = palette .getDarkVibrantSwatch(); Palette.Swatch lightSwatch = palette .getLightVibrantSwatch(); if (lightSwatch != null) { // awesome palette code } } } }
25. https://github.com/saulmm/Material-Movies
26. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(mAwesomeStatusColor); getWindow().setNavigationBarColor(mAwesomeNavColor); }
28. @_saulmm Android Design Support Library dependencies { ... compile ’com.android.support:design:22.2.0’ }
29. @_saulmm Float Action Button (FAB)
30. @_saulmm Float Action Button (FAB)
31. @_saulmm Snackbar
32. @_saulmm Float Label for editing text
33. @_saulmm Tabs
34. @_saulmm Navigation View
35. @_saulmm Navigation View
36. @_saulmm Coordinator Layout
37. https://github.com/chrisbanes/cheesesquare https://github.com/mresti/Design-Lib-Sample
38. Practice on Paper
39. Further reading Support Libraries v22.1.0 https://chris.banes.me/2015/04/22/support-libraries-v22-1-0/ Material Design Guidelines http://www.google.com/design/spec/material-design/introduction.html Android Design Support Library http://android-developers.blogspot.com.es/2015/05/android-design-support-library.html First steps with the Design Support Library https://medium.com/android-bites/first-steps-with-the-design-support-library-8dcf06230ddd From Material Design to Android Wear https://speakerdeck.com/saulmm/from-material-design-to-android-wear