These slides contain basic overview of Material Design(new User Interface of Android) form a developers perspective.

2. AGENDA
• Material theme
• Styles
• Layouts
• Elevation
• Widgets
• Animations

3. MATERIAL THEME
The new material theme provides:
• System widgets that let you set their color palette
• Touch feedback animations for the system widgets
• Activity transition animations

4. The material theme is defined as:
• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

5. STYLE
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app's branding color (for the app bar) -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant of colorPrimary (for status bar, contextual
app bars) -->
<item
name="android:colorPrimaryDark">@color/primary_dark</item
>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>

7. LAYOUTS
Layouts should conform to the material design guidelines
• Baseline grids
• Keylines
• Spacing
• Touch target size
• Layout structure

8. ELEVATIONS
Views can cast shadows, and the elevation value of a view determines
the size of its shadow and its drawing order.
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />

10. THE Z VALUE
Z = elevation + translationZ
To set the elevation of a view:
In a layout definition, use the android:elevation attribute.
In the code of an activity, use the View.setElevation method.
To set the translation of a view, use the View.setTranslationZ method.
The
new ViewPropertyAnimator.z and ViewPropertyAnimator.translat
ionZ
methods enable you to easily animate the elevation of views.

11. SHADOWS AND OUTLINES
The bounds of a view's background drawable determine the default
shape
of its shadow
Outlines represent the outer shape of a graphics object and define the
ripple area for touch feedback.

12. <TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
<!-- res/drawable/myrect.xml -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>

13. You can also create outlines in your code using the methods in
the Outline class, and you can assign them to views with
the View.setOutline method.
To prevent a view from casting a shadow, set its outline to null.

14. CLIPPING VIEWS
Clip a view to its outline area using the View.setClipToOutline method.
Only
rectangle, circle, and round rectangle outlines support clipping, as
determined by the Outline.canClip method.
To clip a view to the shape of a drawable, set the drawable as the
background of the view (as shown above) and call
the View.setClipToOutline method.
Because clipping views is an expensive operation, don't animate the
shape
you use to clip a view. To achieve this effect, use a Reveal
Effect animation.

15. UI WIDGETS
Two new widgets
• RecyclerView
• CardView
Available in Android support library

16. RECYCLERVIEW
• Advanced version of ListView
• Item Views are recycled and can be scrolled efficiently
• Should be used with dynamically changing datasets
RecyclerView is easy to use, because it provides:
1. A layout manager for positioning items
2. Default animations for common item operations

21. CARDVIEW
CardView extends the FrameLayout class and lets you show information inside
cards
that have a consistent look on any app. CardView widgets can have shadows
and
rounded corners.
Here's how to specify properties of CardView:
• To set the corner radius in your layouts,
the card_view:cardCornerRadius attribute.
• To set the corner radius in your code, use the CardView.setRadius method.
• To set the background color of a card, use the
card_view:cardBackgroundColor attribute.

23. ANIMATIONS
• Touch feedback
• Reveal effect
• Activity transitions
• Curved motion
• View state changes

24. TOUCH FEEDBACK
The default touch feedback animations for buttons use the
new RippleDrawable class, which transitions between different states with a
ripple
effect.
android:attr/selectableItemBackground
android:attr/selectableItemBackgroundBorderless
RippleDrawable and set it as the background of your view
RippleDrawable as an XML resource using the ripple element
android:colorControlHighlight(style of material theme)

25. REVEAL EFFECT
ViewAnimationUtils.createCircularReveal

26. To reveal a previously invisible view using this effect:

27. To hide a previously visible view using this effect:

28. ACTIVITY TRANSITIONS
• enter transition
• exit transition
• shared elements transition
The Android L Developer Preview supports these enter and exit transitions:
• explode - Moves views in or out from the center of the scene.
• slide - Moves views in or out from one of the edges of the scene.
• fade - Moves views in or out of the scene.

29. The Android L Developer Preview also supports these shared elements
transitions:
• changeBounds - Animates the changes in layout bounds of target views.
• changeClipBounds - Animates the changes in clip bounds of target views.
• changeTransform - Animates the changes in scale and rotation of target
views.
• moveImage - Animates changes in size and scale type for an image view.

31. SPECIFY CUSTOM TRANSITIONS

32. The move_image transition in this example is defined as follows:

33. To enable window content transitions in your code instead, call the
Window.requestFeature method:

34. To specify transitions in your code, call these methods with a Transition
object:
• Window.setEnterTransition
• Window.setExitTransition
• Window.setSharedElementEnterTransition
• Window.setSharedElementExitTransition
The transition is activated when you launch another activity with
the startActivity method.

35. SHARED ELEMENTS TRANSITIONS
To make a screen transition animation between two activities that have a shared
element:
• Enable window content transitions in your style.
• Specify a shared elements transition in your style.
• Define your transition as an XML resource.
• Assign a common name to the shared elements in both layouts with
the android:viewName attribute.
• Use the ActivityOptions.makeSceneTransitionAnimation method.

37. ANIMATING VIEW STATE CHANGES
The new StateListAnimator class lets you define animators that run when the
state of
a view changes. The following example shows how to define an
StateListAnimator as
an XML resource

38. The new StateListAnimator class lets you define animators that run when the state of
a view changes. The following example shows how to define an StateListAnimator
as an XML resource:

39. EXTRACTING PROMINENT COLORS FROM AN IMAGE
The Android L Developer Preview Support Library includes the Palette
class
This class extracts the following prominent colors:
• Vibrant
• Vibrant dark
• Vibrant light
• Muted
• Muted dark
• Muted light
Palette.generate
Palette.generateAsync
Palette.getVibrantColor

40. REFERENCES
https://developer.android.com/preview/material/index.html
http://www.google.com/design/spec/material-design/introduction.html