Material design basicsJorge Juan Barroso Carmona

jorge@karumi.com @flipper83 +JorgeJBarroso

Android expert

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.

A Coherent Cross-platform experience

Flexible design system

Synthesises classic principles of good design

Depth is Important

<ImageView … android:elevation = “5dp” android:stateListAnimator = “@anim/pressed_state_list_animator” … />

view.animate().translationZ(…).start();

Depth as Reaction

<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>

Outline

<ImageView … android:background=“@drawable/ my_circle” /> … /> !<shape xmlns:android=“…” android:shape=“circle”> <solid android:color=“#ffE61A58” /> </shape>

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);

Themes

<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

<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

Palette

Palette

Dark Muted

Dark Vibrant

Muted

Vibrant

Light Muted

Light Vibrant

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... } });

Typography

android:TextAppearance.Material.

TextAppearance.AppCompat.

Cards

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>

Toolbar

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

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

Activity Transitions

Don’t forgetgetWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); ! or !<style name="BaseAppTheme" parent="android:Theme.Material"> <item name= “android:windowContentTransitions"> true </item> </style>

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>

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());

Element transitions<ImageView … android:transitionName=“@transition/my_transition” … /> !!ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());

Ripples

<ripple android:color="?android:colorControlHighlight"> <item> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> </ripple>

And set as background

Circular Reveal

Animator anim = ViewAnimationUtils.createCircularReveal( myView, centerX, centerY, startRadius, finalRadius); anim.start();

!

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

!

Find meI am very social!

jorge@karumi.com @flipper83 +JorgeJBarroso

Questions?

!