Implementing Material Design in Android

Presented at Google DevFest Kathmandu 2014

Transcript

2. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
3. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
4. Everything you see resides on a paper   meet   MATERIAL DESIGN  
5. Paper   Ink   The material on which ink is drawn.   Every pixel drawn by an app on a piece of paper  
6. Paper   Ink   The material on which ink is drawn.   Every pixel drawn by an app on a piece of paper   A  very  good  a+ernoon  to   you  
8. Material as a   Tangible Surface  
15. https://www.youtube.com/watch?v=YaG_ljfzeUw  
16. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
18. App bar A bar that provides: •  Information of where you are •  Important actions
19. App bar A bar that provides: •  Information of where you are •  Important actions
21. App bar Implementing
22. Toolbar Generalization of action bars for use within application layouts.
23. Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar
24. <android.widget.Toolbar xmlns:android=”…" xmlns:app=”…" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:theme="@style/AppTheme" app:popupTheme="@style/mystyle"/> widget_toolbar.xml
25. <FrameLayout ...> <ImageView ... /> <include layout="@layout/widget_toolbar" /> </FrameLayout> activity_my_layout.xml
26. @Override public void onCreate(Bundle savedInstanceState) { ... toolbar = (Toolbar) findViewById(R.id.toolbar); setActionBar(toolbar); }
27. Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar
28. Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar •  Not as an actionbar •  You need to populate the Toolbar with content/ actions manually
29. Full width, default height app bar Full-width, extended height app bar
30. Flexible toolbar and card toolbar
31. Floating toolbar
32. References … Android Docs http://goo.gl/KuQZMq Google Design Guidelines http://goo.gl/dSA09g
33. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
34. BOLD COLORS
35. Appcompat // include the library in your project dependencies { compile 'com.android.support:appcompat- v7:21.+' }
36. Primary Color Accent Color colorPrimary colorAccent colorPrimaryDark
37. <style name="AppTheme" parent="Theme.AppCompat"> <!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item> </style>
38. <style name="AppTheme" parent="Theme.AppCompat"> <!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item> </style>
39. <style name="AppTheme" parent="Theme.AppCompat"> <!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item> </style>
40. <style name="AppTheme" parent="Theme.AppCompat"> <!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item> </style>
41. <style name="AppTheme" parent="Theme.AppCompat"> <!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item> </style>
42. Appcompat android.support.v7.widget.Toolbar setSupportActionBar(toolbar) Toolbar is also a part of this toolbar
43. Content can provide color! Meet Palette  
45. VIBRANT MUTED DARK VIBRANT DARK MUTED LIGHT VIBRANT LIGHT MUTED
46. Palette also lets you extract   Colors for Title and Body   Vibrant   Title color generated from Vibrant   Body text color generated from Vibrant  
47. // include the library in your project dependencies { compile 'com.android.support:palette- v7:21.+' }
48. // initialization Palette.generate(Bitmap bitmap); Palette.generateAsync(Bitmap bitmap, PaletteAyncListener listener); // fetch color int vibrant = palette.getVibrantColor(DEFAULT_COLOR); // set color myView.setBackgroundColor(vibrant);
49. // fetch Swatch vibrantSwatch = palette.getVibrantSwatch(); // fetch colors from Swatch int color = vibrantSwatch.getRgb(); int titleColor = vibrantSwatch.getTitleTextColor(); Int bodyColor = vibrantSwatch.getBodyTextColor();
50. and hence,   You can do this  
51. References … Chris Banes http://goo.gl/h2on88 http://goo.gl/pu0dXa Android Docs http://goo.gl/BMmhW0 http://goo.gl/VCHQIK
52. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
53. CARDS
54. Cards Implementing
55. CardView
56. // include the library in your project dependencies { compile 'com.android.support:cardview- v7:21.+' } CardView
57. <android.support.v7.widget.CardView ... app:cardCornerRadius="2dp" app:cardElevation="4dp"> <ImageView .../> </android.support.v7.widget.CardView> CardView
58. RecyclerView
59. // include the library in your project dependencies { compile 'com.android.support:recyclerview- v7:21.+' } RecyclerView
60. <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent"/> RecyclerView
61. private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView
62. private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView
63. private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView
64. class MyAdapter extends RecyclerView.Adapter<ViewHolder> RecyclerView
65. class MyAdapter extends RecyclerView.Adapter<ViewHolder> class ViewHolder extends RecyclerView.ViewHolder { ... } RecyclerView
66. class ViewHolder extends RecyclerView.ViewHolder { // override the superclass implementation public ViewHolder(View v) { super(v); ... } } RecyclerView
67. class ViewHolder extends RecyclerView.ViewHolder { // override the superclass implementation public ViewHolder(View v) { super(v); // do your findViewById's here } } RecyclerView
68. Class MyAdapter extends RecyclerView.Adapter<ViewHolder> { @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { return null; } @Override public void onBindViewHolder(ViewHolder viewHolder, int i) { } @Override public int getItemCount() { return 0; } } RecyclerView
69. class BaseAdapter extends RecyclerView.Adapter<ViewHolder> { @Override public ViewHolder onCreateViewHolder(ViewGroup group, int i) { // set layout and return the ViewHolder View v = LayoutInflater.from(context).inflate(layout, group, false); ViewHolder vh = new ViewHolder(v); return vh; } ... } RecyclerView
70. class BaseAdapter extends RecyclerView.Adapter<ViewHolder> { @Override public void onBindViewHolder(ViewHolder vh, int i) { // load appropriate data into views vh.getBody().setText(data.get(i)); } ... } RecyclerView
71. class BaseAdapter extends RecyclerView.Adapter<ViewHolder> { @Override public int getItemCount() { // return your dataset size return data.size(); } ... } RecyclerView
72. References … Grokking Android http://goo.gl/LSXySl Antonio Leiva http://goo.gl/DQIpYv BigNerdRanch http://goo.gl/YFvI4Z Android docs http://goo.gl/ZqGD2v Android Developers Backstage http://goo.gl/k4Wpsd
73. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
74. Activity Transitions
76. // Communicate between Activity A and B Activity Transitions
77. // Communicate between Activity A and B // Activity A pair = new Pair<View, String>(commonView, IMG); ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activit y, pair)); startActivity(intent, options.toBundle()); Activity Transitions
78. // Communicate between Activity A and B // Activity B Activity Transitions
79. // Communicate between Activity A and B // Activity B ViewCompat.setTransitionName(commonView, IMG); Activity Transitions
80. Ripple
81. <!-- include ripple drawables in your drawable-v21 file -- > <!-- unbounded ripple --> <ripple ... android:color="?attr/colorPrimaryDark"/> Ripple
83. <!-- ripple with mask --> <ripple ... android:color="?attr/colorPrimaryDark"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="?attr/colorPrimary"/> </shape> </item> </ripple> Ripple
85. <!-- including ripples is really easy --> <android.support.v7.widget.CardView ... android:foreground="@drawable/card_ripple"> Ripple
86. Reveal
88. // use static method to generate required reveal Animator reveal = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius) Reveal
89. // use static method to generate required reveal Animator reveal = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius) // register a listener to hide/unhide view reveal.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { view.setVisibility(VISIBILITY); } }); Reveal
90. Vector Drawables
91. Vector Drawables •  This lets you create a drawable based on an XML vector graphic. •  It can be defined in an XML file with the <vector> element, which wasn't previously available.
92. Vector Drawables Define an object geometrically •  Points •  Lines •  Curves •  Color information
93. <!-- Include in your drawables-v21 file --> <vector ...> <path ... android:pathData="@string/heart"/> <group ... android:name="heart_group"> <path ... android:name="heart"/> </group> </vector> Vector Drawables
94. <!-- Include in your drawables-v21 file --> <vector ...> <path ... android:pathData="@string/heart"/> <group ... android:name="heart_group"> <path ... android:name="heart"/> </group> </vector> Vector Drawables
95. <!-- Include in your drawables-v21 file --> <vector ...> <path ... android:pathData="@string/heart"/> <group ... android:name="heart_group"> <path ... android:name="heart"/> </group> </vector> Vector Drawables
96. <!-- Include in your drawables-v21 file --> <vector ...> <path ... android:pathData="@string/heart"/> <group ... android:name="heart_group"> <path ... android:name="heart"/> </group> </vector> Vector Drawables
97. AnimatedVectorDrawables
99. <!-- Include in your drawables-v21 file --> <animated-vector android:drawable="@drawable/heart"> <target android:name="heart_group" android:animation="@anim/appear" /> <target android:name="heart" android:animation="@anim/gray_to_pink" /> </animated-vector> AnimatedVectorDrawables
100. <!-- Include in your drawables-v21 file --> <animated-vector android:drawable="@drawable/heart"> <target android:name="heart_group" android:animation="@anim/appear" /> <target android:name="heart" android:animation="@anim/gray_to_pink" /> </animated-vector> AnimatedVectorDrawables
101. <!-- Include in your drawables-v21 file --> <animated-vector android:drawable="@drawable/heart"> <target android:name="heart_group" android:animation="@anim/appear" /> <target android:name="heart" android:animation="@anim/gray_to_pink" /> </animated-vector> AnimatedVectorDrawables
102. <!-- Include in your drawables-v21 file --> <animated-vector android:drawable="@drawable/heart"> <target android:name="heart_group" android:animation="@anim/appear" /> <target android:name="heart" android:animation="@anim/gray_to_pink" /> </animated-vector> AnimatedVectorDrawables
103. References … Android Docs http://goo.gl/UCB6Nx http://goo.gl/IG7qre http://goo.gl/0z2Qys Roman Guy http://goo.gl/irAKpI Square Island http://goo.gl/mvVP8X Vector Drawable Generator http://goo.gl/F6TRlg
104. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
105. FAB Floating Action Button The primary action of your app +
106. Floating Action Button The primary action of your app
107. FAB Implementing
108. FAB Shape with an elevation
109. References … Use Libraries J Chris Basha http://goo.gl/jIQAht
110. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
112. What’s new with notifications?
113. Floating Action Button The primary action of your app Material Theme
114. Floating Action Button The primary action of your app Notiication Color Notification.Builder.setColor()
115. Floating Action Button The primary action of your app Small icon badging When your app has a large icon and small icon
116. Floating Action Button The primary action of your app Head's up notifications FullScreen activity (fullScreenIntent) Notification has high priority and uses ringtones or vibrations
117. Lock screen notifications VISIBILITY_PUBLIC // lock screen notifications VISIBILITY_SECRET // doesn't show any part of this notification on the lock screen VISIBILITY_PRIVATE // shows basic information, such as the notification's icon and the content title, but hides the notification's full content.
118. // set builder visibility and public notification notificationBuilder .setVisibility(Notification.VISIBILITY_PRIVATE) .setPublicVersion(publicNotification.build());
120. References … Android docs http://goo.gl/q1I1U
121. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
123. What’s new with overview?
124. What’s new in overview? Configurable overview cards xml (manifest) Icon - android:icon Label text - android:label Top Bar Color - colorPrimary value of android:theme
125. What’s new in overview? Configurable overview cards Programmatically ActivityManager.TaskDescription td = new ActivityManager.TaskDescription(caption, bitmap, color); setTaskDescription(td);
126. Label Text   Icon   Top Bar Color  
127. What’s new in overview? Support for multi-tasking // Done with intent flags Intent.FLAG_ACTIVITY_NEW_DOCUMENT Intent.FLAG_ACTIVITY_RETAIN_IN_RECENTS
129. <activity android:name=".ImageDetailPage" android:launchMode="standard" android:documentLaunchMode="always" android:excludeFromRecents="false" android:maxRecents="2" />
130. References … Android docs http://goo.gl/2Sd7xg Big nerd ranch http://goo.gl/FIdaVn
131. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
132. Project Svelte Project Butter
133. Project Volta
134. Project Volta •  batterystats
135. Project Volta •  batterystats •  Battery historian
136. Project Volta •  batterystats •  Battery historian •  JobScheduler
137. Jobscheduler An API for scheduling various types of jobs against the framework that will be executed in your application's own process.
138. Jobscheduler •  Configurable •  Persists across reboot (Yayyy !!!) •  Easy to use API •  Easy to handle failures and retries
139. JobScheduler Implementing
140. Implementing Jobscheduler Configurable components: •  JobInfo •  JobService
141. JobInfo Unit of Job
142. JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();
143. JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();
144. JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();
145. JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();
146. JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();
147. JobService Entry point for the callback from the JobScheduler.
148. public class MyJobService extends JobService { @Override public boolean onStartJob(JobParameters jobParameters) { ... } @Override public boolean onStopJob(JobParameters jobParameters) { ... } }
149. JobService Write a JobService •  Add to manifest •  Requires android.permission.BIND_JOB_SERVICE •  Override onStartJob() •  Override onStopJob()
150. JobService – onStartJob() Override this method with the callback logic for your job Call jobFinised() after your job is done Return true if your service needs to process the work (on a separate thread). false if there's no more work to be done for this job.
151. JobService – onStopJob() Called by the system before you've had a chance to call jobFinished() When the conditions you defined no longer persists Free up resources held by your logic Return true to indicate to reschedule this job based on the retry criteria provided at job creation-time. false to drop the job.
152. Finally, run the job jobScheduler.schedule(jobInfo);
153. References … Android docs http://goo.gl/Z1AqSn http://goo.gl/dNqUBj http://goo.gl/R18l1d Mark Murphy's talk on Droidcon London http://goo.gl/dluNts
154. 1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources
155. Follow (Material) Design Patterns http://www.google.com/design/ spec/material-design/ introduction.html
156. Material Up http://www.materialup.com/
157. Android App Design Showcase http:// androidniceties.tumblr.com/
158. YouTube Android Developers Channel http://www.youtube.com/user/ androiddevelopers
159. Roman Nurik
160. Nick Butcher
161. Matias Duarte
162. Download PhoStory from GitHub https://github.com/rakeeb11/phostory
163. Follow the user And all else will follow