I'm not a designer, But as an android developer i often feel that there is a need to follow design guidelines for android platform while development and that is what i conveyed in one of my recent brownbag sessions check out the presentation!!

1. A developer view on Google’s
Material Design
- Manikanta Garikipati

2. Why do we need it?
What is Material Design?
New Patterns
How do i start?
Agenda

3. Why?

4. Material Design

5. Goals
• Visual design language that synthesises classic
principles of good design
• Unified experience across platforms and different
device sizes
• Provide guidelines in order to create appealing
Android applications

6. Material Principles
Material is a metaphor
It is the unifying theory of a
rationalised space and a system of
motion.
Yet technologically advanced and
open to imagination and magic.
Bold, graphic, intentional
The foundational elements of print-
based design – typography, grids,
space, scale, colour, and use of
imagery – guide visual treatments.
Motion provides meaning
Motion respects and reinforces the
user as the prime mover. Primary
user actions are inflection points
that initiate motion, transforming
the whole design.

8. Elevation

9. Layering

12. Elevation
res/layout/fragment_sample.xml
<ImageView android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="5dp"/>
SampleFragment.java
view.animate().translationZ(5).start();

13. Cards (Only if you need them)

14. res/layout/foo_card.xml
<LinearLayout xmlns:android=""
xmlns:tools="http://schemas.android.com/tools"
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>
</LinearLayout>

15. Color Palette

16. Primary and Accent Colour

17. <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>
res/layout-v21/theme.xml
SDK 21 and above

18. <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>
res/layout/theme.xml
SDK 7 and above

20. Holo to material

21. Holo to material

22. Holo to material

23. Holo to material

24. Toolbar

25. Toolbar in Material
MainActivity.java
Toolbar toolbar = (Toolbar)
findViewById(R.id.my_awesome_toolbar);
setActionBar(toolbar);
res/layout/toolbar.xml
<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. Toolbar in AppCompat
MainActivity.java
Toolbar toolbar = (Toolbar)
findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
res/layout/toolbar.xml
<android.support.v7.widget.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"/>

27. Navigation Drawer

28. Touch Feedback

29. Reveal effect
MyActivity.java
Animator anim =
ViewAnimationUtils.
createCircularReveal(
myView,
centerX,
centerY,
startRadius,
finalRadius);
anim.start();

30. final View myView = findViewById(R.id.my_view);
Animator anim =
ViewAnimationUtils.createCircularReveal(myView,
cx,
cy,
initialRadius,
0);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
} });
MyActivity.java

31. Vector Drawables
res/layout/fragment_heart.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/heart"/>

32. <vector xmlns:android=“...”
android:height="256dp"
android:width="256dp"
android:viewportWidth="32"
android:viewportHeight="32">
<path
android:fillColor="@color/orange"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>
res/drawable/heart.xml

33. Navigation Drawer

34. Toolbar

35. Iconography

36. Key lines

37. Typography

38. Loading Activity

39. No Detail is too small

40. No Detail is too small

41. How to Start

42. Learn the theory

43. Priorities

44. Iterate, and do it fast

45. Thank You!
Questions?

46. Further Reading
• http://geekmk.com
• https://www.google.com/design/spec/material-design/introduction.html
References
• Google material design Guidelines
• Novodo