MATERIA

L DESIG

N

ANDROID

(FOR D

EVELOPE

RS)

BY

MO

HA

MM

AD

SA

MI U

L L AH

FA

RO

OQ

UI

AGENDA

• Material theme

• Styles

• Layouts

• Elevation

• Widgets

• Animations

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

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

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>

LAYOUTS

 Layouts should conform to the material design guidelines

• Baseline grids

• Keylines

• Spacing

• Touch target size

• Layout structure

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

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

methods enable you to easily animate the elevation of views.

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.

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

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.

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.

UI WIDGETS

Two new widgets

• RecyclerView

• CardView

Available in Android support library

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

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.

ANIMATIONS

• Touch feedback

• Reveal effect

• Activity transitions

• Curved motion

• View state changes

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)

REVEAL EFFECT

ViewAnimationUtils.createCircularReveal

To reveal a previously invisible view using this effect:

To hide a previously visible view using this effect:

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.

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.

SPECIFY CUSTOM TRANSITIONS

The move_image transition in this example is defined as follows:

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

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.

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.

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

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:

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

REFERENCES

https://developer.android.com/preview/material/index.html

http://www.google.com/design/spec/material-design/introduction.html