Material Design

Material Design

Develop

Chet Haase Rich Fulcher

Color & Themes

We’ve created an extensive palette with beautiful colors as an aid to choose a good color theme

Color palette

Bold use of primary color

Bold and immersive use of color in large fields in the UI is strongly encouraged

Color density

Densities depend on content - list vs. imagery vs. bold color fields

Examples

Accent color

Highlight important buttons or parts of the UI with a complementary accent color

Accent color applied to controls

DevelopmentThemes

Demo!

To Live in a Material World<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.Material" >

Standard Material theme

To Live in a Material World<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.Material" >

Standard Material theme

Material world (2)

<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >

Customized theme

Material world (2)

<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >

Customized theme

<resources> <style name="AppTheme" parent="android:Theme.Material.Light"> <!— item overrides —> </style> </resources>

styles.xml

Colorizing assets<style name="BaseAppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">@color/theme_default_primary</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_dark</item> <item name="android:colorBackground">@color/theme_background</item> <item name="android:colorAccent">@color/theme_default_accent</item> <item name="android:colorControlHighlight">@color/theme_default_accent_light</item> </style> <style name="RedTheme" parent="BaseAppTheme"> <item name="android:colorPrimary">@color/theme_default_primary_red</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_red_dark</item> </style> <style name="BlueTheme" parent="BaseAppTheme"> <item name="android:colorPrimary">@color/theme_default_primary_blue</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_blue_dark</item> </style>

New theme color attributes

colorPrimary colorPrimaryDark colorAccent colorControlNormal (defaults to textColorSecondary) colorControlActivated (defaults to colorAccent) colorControlHighlight colorButtonNormal

DevelopmentColors

Derive dominant colors from bitmaps

setColor() or setTint() on grayscale assets

Palette

Derive dominant colors from bitmaps

setColor() or setTint() on grayscale assets

Palette

Bitmap bitmap = MaterialTheming.mPhotos.get(imageId);imageView.setImageDrawable(new BitmapDrawable(getResources(), bitmap));Palette palette = Palette.generate(bitmap);PaletteItem item = palette.getDarkVibrantColor();GradientDrawable containerBackground = (GradientDrawable) container.getBackground();containerBackground.setColor(item.getRgb());

Layout

Baseline grids

Structural elements align to an 8dp grid

Keylines

Use Keylines to determine the space between the edge and content

Mobile: 16dp & 72dp

Tablet & desktop: 24dp & 80dp

Increments

Layouts are created with increments of 56 dp on mobile and 64 dp on tablet/desktop

Baseline grids

Use a 4dp baseline grid for typography

An Example

Think in blocks, using standard increments.

Think in blocks

Spacing is created in blocks.

Keylines

Follow the keylines. The text should align.

Baseline grid

Follow the baseline grid. The text should align.

Development: Layout

Standard Android Programming!!!

Standard Android Programming!!!

Dimensionality

The Third Dimension

Paper can be layered in front of and behind other paper.

Paper and Ink

Z-depth

Paper respects the physical dimensions of devices.

Paper and Ink

Z-position and Shadows

Each piece of paper resides at a single position along the z-axis.

Z-position and shadow indicate relationships between surfaces.

Paper and Ink

Step Seam

Z-position and Hierarchy

The z-position of paper cues focus and directs attention ...

Paper and Ink

Z-position and Hierarchy

… and reflects content hierarchy and the scope of actions.

Paper and Ink

Built into framework

DevelopmentIt’s all about the Z

Demo!

Zzzzzzz

View Hierarchy plane

Z = Elevation + TranslationZ

Zzzzzzz

Elevation

View Hierarchy plane

Z = Elevation + TranslationZ

Zzzzzzz

TranslationZ

Elevation

View Hierarchy plane

Z = Elevation + TranslationZ

Zzzzzzz

TranslationZ

Elevation

View Hierarchy plane

Z

Z = Elevation + TranslationZ

Elevation

setElevation(float) setTranslationZ(float) setZ(float)

View

Also, APIs to set outline

Elevation basics: resource files

<View android:layout_width="80dp" android:layout_height="80dp" android:layout_marginRight="40dp" android:background="@drawable/shape" android:elevation="30dp" android:layout_gravity="center"/>

Elevation basics: resource files

<View android:layout_width="80dp" android:layout_height="80dp" android:layout_marginRight="40dp" android:background="@drawable/shape" android:elevation="30dp" android:layout_gravity="center"/>

Elevation basics: code

view.setElevation(120);

view.setTranslationZ(120);view.animate().translationZ(120); view.animate().scaleX(1.2f).scaleY(1.2f).translationZ(120);

Animating elevation state<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="elevate me" android:layout_gravity="center_horizontal" android:stateListAnimator="@anim/elevator"/>

Animating elevation state<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="elevate me" android:layout_gravity="center_horizontal" android:stateListAnimator="@anim/elevator"/>

<?xml version="1.0"?><selector xmlns:a="http://schemas.android.com/apk/res/android"> <item a:state_pressed="true"> <set> <objectAnimator a:propertyName="scaleX" a:duration="100" a:valueTo="1.2"/> <objectAnimator a:propertyName="scaleY" a:duration="100" a:valueTo="1.2"/> <objectAnimator a:propertyName="translationZ" a:duration="100" a:valueTo="20"/> </set> </item> <item> <set> <objectAnimator a:propertyName="scaleX" a:duration="100" a:valueFrom="1.2" a:valueTo="1"/> <objectAnimator a:propertyName="scaleY" a:duration="100" a:valueFrom="1.2" a:valueTo="1"/> <objectAnimator a:propertyName="translationZ" a:duration="100" a:valueFrom="20" a:valueTo="0"/> </set> </item> </selector>

res/anim/elevator.xml

Toolbars

DevelopmentToolbars

Demo!

Toolbar as ActionBar<LinearLayout ...> <Toolbar android:layout_width="match_parent" android:layout_height="400dp" android:background="#70ff70" android:id="@+id/toolbar" /> <!-- --></LinearLayout>

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setActionBar(toolbar);

<style name=“AppThemeNoActionBar" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:windowNoTitle">true</item> </style>

More customizable

Can set scroll position manually

Sibling view

Allows other views (e.g., navigation drawer) to overlay ActionBar

Toolbars

Buttons

Raised Button

Flat Button

Floating Action Button

Raised Button

Flat Button

Floating Action Button

Floating action button

Raised button

Flat button

The FAB

Highlights the most relevant or frequently used action

Tells users what to do next

Strongly characteristic of an app’s function

FAB Transformations

FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen

FAB Transformations

FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen

FAB Expansion

FAB Expansion

FAB Reactions

FAB Reactions

DevelopmentFloating Action Buttons

Demo!

FAB: It’s Just Another ViewFrameLayout

content

View

Circular background, on top of other content in container

FAB: Layout<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent"/> <com.android.example.fabulouslist.RoundView android:id="@+id/fab" android:elevation="4dp" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginBottom="30dp" android:layout_marginRight="30dp" android:layout_gravity="bottom|right" android:background="@drawable/fab"/></FrameLayout>

FAB: Outlinepublic class RoundView extends View { @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { Outline outline = new Outline(); outline.setOval(0, 0, w, h); setOutline(outline); setClipToOutline(true); }}

Motion

Familiarity Solid matter

Familiarity Solid matter

Familiarity Force and mass

Familiarity Force and mass

Natural motionChoreography

Natural motionChoreography

Choreography Arcs

Choreography Arcs

DevelopmentAnimations

Demo!

Animating a view’s clip shape

Example: KitKat search bar

Caveat: Can be expensive

Better than KitKat, but still not cheap

Older APIs still valid for small shape reveals

Canvas.drawRoundRect() with BitmapShader

Reveal

ViewAnimationUtils.createCircularReveal(View view,

int centerX, int centerY,

float startRadius, float endRadius);

Animating a view’s clip shape

Example: KitKat search bar

Caveat: Can be expensive

Better than KitKat, but still not cheap

Older APIs still valid for small shape reveals

Canvas.drawRoundRect() with BitmapShader

Reveal

ViewAnimationUtils.createCircularReveal(View view,

int centerX, int centerY,

float startRadius, float endRadius);

Animation Curves: Timing

@interpolator/fast_out_slow_in @interpolator/linear_out_slow_in @interpolator/fast_out_linear_in

Animation Curves: Custom Timing

<pathInterpolator android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>

!

!

!

!

!

!

!

!

See ApiDemo PathAnimations for examples

Animation Curves: Motion

Path path = new Path(); path.moveTo(10, 10); path.cubicTo(20, 20, 20, 100, 100, 100); ObjectAnimator.ofFloat(view, “x”, “y”, path).start();

DevelopmentAnimations

Demo!

Enabling transitions<resources> <style name="Theme.Sample" parent="Theme.Base"> <item name="android:windowContentTransitions">true</item> <item name="android:windowSharedElementEnterTransition"> @transition/grid_detail_transition </item> <item name="android:windowSharedElementExitTransition"> @transition/grid_detail_transition </item> </style> </resources>

Customizing transitions<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds> <targets> <target android:targetId="@id/textview_name" /> <target android:targetId="@id/textview_title" /> </targets> </changeBounds> <moveImage> <targets> <target android:targetId="@id/imageview_header" /> <target android:targetId="@id/imageview_item" /> </targets> </moveImage> </transitionSet>

Shared element setup

ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(this, new Pair<View, String>( view.findViewById(R.id.imageview_item), DetailActivity.VIEW_NAME_HEADER_IMAGE), new Pair<View, String>( view.findViewById(R.id.textview_name), DetailActivity.VIEW_NAME_HEADER_TITLE) ); startActivity(intent, activityOptions.toBundle());

For more informationL Developer Preview developer.android.com/preview

Material Design at I/O google.com/events/io/io14videos

Material Witness Demo curious-creature.org/2014/06/26/google-io-2014-slides-and-demo

developer.android.com/preview/samples.htmlPreview Demos

Google+ google.com/+RichardFulcher

google.com/+ChetHaase

Podcast Android Developers Backstage