This document discusses material design basics for Android, including principles like depth, reactions, outlines, themes, palettes, typography, cards, toolbars, activity transitions, element transitions, ripples, and circular reveal animations. It provides code examples and references additional resources on the topic. The presenter, Jorge Juan Barroso Carmona, works at Karumi, an Android development studio, and encourages attendees to contact him with any other questions.

1. Material design basics
Jorge Juan Barroso Carmona
Android expert
jorge@karumi.com
@flipper83
+JorgeJBarroso

2. Karumi is the Rock Solid code software development studio.
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.

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. Dark Muted
Dark Vibrant
Muted
Vibrant
Light Muted
Light Vibrant
Palette

18. dependencies {
compile 'com.android.support:palette-v7:
21.0.+'
Palette
}
!!
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. Material
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" />

26. App.Compat
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" />

27. Activity
Transitions

28. Don’t forget
getWindow().requestFeature(Window.FEATURE
_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”>
@transition/change_image_transform</item>
</style>

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. Questions?
!
Find me
I am very social!
jorge@karumi.com
@flipper83
+JorgeJBarroso

38. !