Material Design in Android

Seminary "Material Design in Android" in University of Granada.

Transcript

1. Material Design In Android @Mr_Esti @Mr_Esti
2. Material Design implementing & compatibilizing - Concepts - Animations - Style - Layout - Components - Patterns - Compatibility
4. Concepts Material is the metaphor
5. Print-like design
7. Constrained depth
9. <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" />
10. <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>
13. Concepts Motion provides meaning
14. // 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();
16. // 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
17. public void onFabPressed(View view) { Intent i = new Intent (TransitionFirstActivity.this, TransitionSecondActivity.class); ActivityOptions transitionActivityOptions = ActivityOptions .makeSceneTransitionAnimation(mContext, Pair.create(mFabButton, "fab"), Pair.create(mHeader, "holder1")); startActivity(i, transitionActivityOptions.toBundle()); } <View ... android:transitionName="holder1" /> <Button ... android:transitionName=“fab" />
18. Concepts Bold, graphic, intentional
19. <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>
21. 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 } } } }
24. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(mAwesomeStatusColor); getWindow().setNavigationBarColor(mAwesomeNavColor); }
26. https://github.com/saulmm/Android-Material-Examples
27. https://github.com/saulmm/Curved-Fab-Reveal-Example
28. Practice on Paper
29. 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 From Holo to Material http://novoda.com/blog/from-holo-to-material Paper prototyping https://www.youtube.com/watch?v=07xPF7L6klY From Material Design to Android Wear https://speakerdeck.com/saulmm/from-material-design-to-android-wear
31. Material Design
32. Holo App
33. RecyclerView API Documentation: “A Flexible view for providing a limited window into a large data set”
34. RecyclerView API Recycler API: • Adapter • ViewHolder • Layaout Manayer • Item Decoration • Item Animation
35. Adapter Recycler API: • Defines what gets displayed and how one item is displayed • No default implementations • ViewHolder pattern
36. Adapter code
37. ViewHolder code
38. LayoutManager • Defines: The placement of items • One predefined layoutmanager: LinearLayoutManager
39. Item Decorations • Defines how items are separated from each other • No default implementation • Called once per onDraw()
40. Animations The ItemAnimator class: Defines the animations for addition, removal or the moving of items
41. Examples: Animations
42. https://github.com/mresti/Materialize-Android-App/
43. Further reading A First Glance at Android’s RecyclerView http://www.grokkingandroid.com/first-glance-androids-recyclerview/ RecyclerView-Demo https://github.com/saulmm/RecyclerView-demo