Download - Material design basics
![Page 1: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/1.jpg)
Material design basicsJorge Juan Barroso Carmona
[email protected] @flipper83 +JorgeJBarroso
Android expert
![Page 2: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/2.jpg)
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.
![Page 3: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/3.jpg)
A Coherent Cross-platform experience
![Page 4: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/4.jpg)
Flexible design system
![Page 5: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/5.jpg)
Synthesises classic principles of good design
![Page 6: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/6.jpg)
Depth is Important
![Page 7: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/7.jpg)
<ImageView … android:elevation = “5dp” android:stateListAnimator = “@anim/pressed_state_list_animator” … />
view.animate().translationZ(…).start();
![Page 8: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/8.jpg)
Depth as Reaction
![Page 9: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/9.jpg)
<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>
![Page 10: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/10.jpg)
Outline
![Page 11: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/11.jpg)
<ImageView … android:background=“@drawable/ my_circle” /> … /> !<shape xmlns:android=“…” android:shape=“circle”> <solid android:color=“#ffE61A58” /> </shape>
![Page 12: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/12.jpg)
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);
![Page 13: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/13.jpg)
Themes
![Page 14: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/14.jpg)
<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
![Page 15: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/15.jpg)
<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
![Page 16: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/16.jpg)
Palette
![Page 17: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/17.jpg)
Palette
Dark Muted
Dark Vibrant
Muted
Vibrant
Light Muted
Light Vibrant
![Page 18: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/18.jpg)
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... } });
![Page 19: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/19.jpg)
Typography
![Page 20: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/20.jpg)
android:TextAppearance.Material.
![Page 21: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/21.jpg)
TextAppearance.AppCompat.
![Page 22: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/22.jpg)
Cards
![Page 23: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/23.jpg)
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>
![Page 24: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/24.jpg)
Toolbar
![Page 25: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/25.jpg)
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
![Page 26: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/26.jpg)
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
![Page 27: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/27.jpg)
Activity Transitions
![Page 28: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/28.jpg)
Don’t forgetgetWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); ! or !<style name="BaseAppTheme" parent="android:Theme.Material"> <item name= “android:windowContentTransitions"> true </item> </style>
![Page 29: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/29.jpg)
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”> @transition/change_image_transform</item> </style>
![Page 30: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/30.jpg)
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());
![Page 31: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/31.jpg)
Element transitions<ImageView … android:transitionName=“@transition/my_transition” … /> !!ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());
![Page 32: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/32.jpg)
Ripples
![Page 33: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/33.jpg)
<ripple android:color="?android:colorControlHighlight"> <item> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> </ripple>
And set as background
![Page 34: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/34.jpg)
Circular Reveal
![Page 35: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/35.jpg)
Animator anim = ViewAnimationUtils.createCircularReveal( myView, centerX, centerY, startRadius, finalRadius); anim.start();
![Page 36: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/36.jpg)
!
BibliographyThey’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
![Page 38: Material design basics](https://reader033.vdocument.in/reader033/viewer/2022052301/55a2033a1a28ab47268b47c2/html5/thumbnails/38.jpg)
!