From Material Design to Android Wear

These are the slides about the talk: 'From Material Design to Android Wear' at the RITSI event.

Transcript

1. From Material Design to android wear @_saulmm @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. android wear all you need to be a fancy wear developer - Concepts - Environment - Notification API - Wearable apps - Node Api - Message Api - Watchfaces @Mr_esti
28. Concepts @Mr_esti
29. Real life Get phone Use phone @Mr_esti
30. Five seconds per interaction Wear @Mr_esti
31. All in a glance…
32. @Mr_esti
33. Conectivity
34. != @Mr_esti
35. What is not an android wear
36. @Mr_esti
37. Smartwatchs?
38. Unsupported APIs - android.webkit - android.print - android.app.backup android.appwidget - android.hardware.usb
39. @_saulmm Environment
40. Demo Connecting to wear
41. Notifications Apps
42. https://github.com/saulmm/android-wear-basics
43. Demo Enriched notifications
44. @_saulmm Don’t stop the user Design for big gestures Design principles
45. @_saulmm UX
46. BoxInsetLayout CardFragment CircledImageView ConfirmationActivity DismissOverlayView GridViewPager GridPagerAdapter FragmentGridPagerAdapter WatchViewSub User interface widgets
47. Demo User interface
48. @_saulmm Installation
49. Structure mobile / build.gradle @_saulmm
50. @_saulmm Wearable.{wear_api}.addListener(mGoogleApiClient, this); WearableListenerService
51. Node NodeApi @_saulmm
52. Message Api, send Message @_saulmm
53. Message Api, receive Message @_saulmm
54. Node Data Message Watchface @_saulmm
55. Data Watch faces assets & data @_saulmm
56. https://github.com/saulmm
57. Useful resources Introduction to Android Wear - Cyril Mottier https://speakerdeck.com/cyrilmottier/introduction-to-android-wear-a-glimpse-into-the-future Building apps for wearables - Android developers https://developer.android.com/training/building-wearables.html Android wear developers - Google+ Community https://plus.google.com/u/0/communities/113381227473021565406 @_saulmm