Material design basics

A tour of material design APIs showing some sample code and beautiful user interface elements we can implement following the Material guidelines and using the new Android APIs.

Transcript

1. Material design basics Jorge Juan Barroso Carmona jorge@karumi.com @flipper83 +JorgeJBarroso Android expert
2. We embark on every project with a commitment to create something elegant, enduring and effective. That is our heartbeat. Our approach is uniquely simple and honest, we are a small dedicated software studio, delivering outstanding work. Karumi is the Rock Solid code software development studio.
3. A Coherent Cross-platform experience
4. Flexible design system
5. Synthesises classic principles of good design
6. Depth is Important
7. <ImageView … android:elevation = “5dp” android:stateListAnimator = “@anim/pressed_state_list_animator” … /> view.animate().translationZ(…).start();
8. Depth as Reaction
9. <selector xmlns:android=“…”> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration=“@android:integer/ config_shortAnimTime" android:valueTo="2dp"/> </set> </item> <item android:state_pressed="false"> <set> <objectAnimator … /> </set> </item> </selector>
10. Outline
11. <ImageView … android:background=“@drawable/ my_circle” /> … /> <shape xmlns:android=“…” android:shape=“circle”> <solid android:color=“#ffE61A58” /> </shape>
12. ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { int size = getResources(). getDimensionPixelSize( R.dimen.fab_size); outline.setOval(0, 0, size, size); } }; view.setClipToOutline(true); view.setOutlineProvider(viewOutlineProvider );
13. Themes
14. <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorAccent">@color/accent</item> <item name=“android:colorPrimaryDark”> @color/primary_dark</item> </style> Material
15. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorAccent">@color/accent</item> <item name=“android:colorPrimaryDark"> @color/primary_dark</item> </style> Theme.AppCompat
16. Palette
17. Palette Dark Muted Dark Vibrant Muted Vibrant Light Muted Light Vibrant
18. Palette dependencies { compile 'com.android.support:palette- v7:21.0.+' } Palette p = Palette.generate(bitmap); Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors... } });
19. Typography
20. android:TextAppearance.Material.
21. TextAppearance.AppCompat.
22. Cards
23. xmlns:card_view="http:// schemas.android.com/apk/res-auto" <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="200dp" android:layout_height="200dp" card_view:cardCornerRadius="4dp"> </android.support.v7.widget.CardView>
24. Toolbar
25. Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setActionBar(toolbar); <Toolbar android:id="@+id/my_awesome_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?android/actionBarSize" android:background="?android/colorPrimary" /> Material
26. Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setActionBar(toolbar); <android.support.v7.widget.Toolbar android:id="@+id/my_awesome_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?actionBarSize" android:background="?colorPrimary" /> App.Compat
27. Activity Transitions
28. Don’t forget getWindow().requestFeature(Window.FEATUR E_CONTENT_TRANSITIONS); or <style name="BaseAppTheme" parent="android:Theme.Material"> <item name= “android:windowContentTransitions"> true </item> </style>
29. Theme transitions <style name="BaseAppTheme" parent=“android:Theme.Material"> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/ explode</item> <item name=“android:windowExitTransition”>@transition/ explode</item> <!-- specify shared element transitions --> <item name=“android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name=“android:windowSharedElementExitTransition”>
30. Code transitions // set an exit transition getWindow().setExitTransition(new Explode()); // all the options Window.setEnterTransition() Window.setExitTransition() Window.setSharedElementEnterTransition() Window.setSharedElementExitTransition() // start the Activity startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this). toBundle());
31. Element transitions <ImageView … android:transitionName=“@transition/my_transition” … /> ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());
32. Ripples
33. <ripple android:color="? android:colorControlHighlight">
 <item>
 <shape android:shape="oval">
 <solid android:color="?android:colorAccent" />
 </shape>
 </item>
 </ripple> And set as background
34. Circular Reveal
35. Animator anim = ViewAnimationUtils.createCircularReveal( myView, centerX, centerY, startRadius, finalRadius); anim.start();
36. Bibliography They’re the cracks! What Material means to Android. David González. Codemotion. 2014 Material Witness. Chet Haase and Romain Guy. Google IO. 2014 Papercraft. Chris Banes and Nick Butcher. Droidcon UK. 2014 http://www.google.com/design
37. Find me I am very social! jorge@karumi.com @flipper83 +JorgeJBarroso Questions?