Material Design

Apps From Quantum Paper

Christa Mabee

Trulia Inc.

Wait… what?

What we’ll cover

Where did Material come from?

The meaning of it all

Using AppCompat to go Material

Material Design Patterns

Material Color

Where did Material come from?

http://vrge.co/W2LTsS

iOS gmail image fromhttp://gmailblog.blogspot.com/2011/01/print-from-your-phone-with-gmail-for.html

The look and feel of Google circa early 2011

Where did Material come from?

Larry Page mandated Project Kennedy in 2011.

Designers started collaborating across projects.

Gmail inbox image from: http://gmailblog.blogspot.com/2013/05/take-action-right-from-inbox.html

Where did Material come from?

Android stood out with the Holo interface.

Where did Material come from?

The Astonishing Tribe

Larry Page’s

Project Kennedy

Matias Duarte

“…a third of the way...”

Android Design

website Google I/O 2014

!

1.0 Alpha 4.0 ICS / Holo 4.4 KitKat 5.0 Lollipop

Where did Material come from?

Where did Material come from?

Where did Material come from?

Where did Material come from?

https://material.angularjs.org

https://fezvrasta.github.io/bootstrap-material-design

Where did Material come from?

A unified design language is giving Google apps a distinctive aesthetic.

The Meaning Of It All

Is this good for us?

The Meaning Of It All

Consumer application adoption of Holo was irregular even on

major apps

20112012 / Holo

Twitter app images from Android Market and http://www.talkandroid.com/77615-twitter-updates-android-app-with-improved-ui-and-new-features/Ebay app images from Android Market and http://www.androidpolice.com/2013/06/12/ebay-app-gets-a-major-update

The Meaning Of It All

Consumer adoption with Material

The Meaning Of It All

“The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.”

– Google

“It is a sufficiently advanced form of paper

as to be indistinguishable from magic.”

– Matias Duarte

The Meaning Of It All

*Skeuomorphism is the practice of

making virtual things look like things in

life.

The Meaning Of It All

*Skeuomorphism is the practice of

making virtual things look like things in

life.

The Meaning Of It All

*Skeuomorphism is the practice of

making virtual things look like things in

life.

The Meaning Of It All

*Skeuomorphism is the practice of

making virtual things look like things in

life.

The Meaning Of It All

Polaroid VSCO

The Meaning Of It All

Material, in a way, does both.

Using AppCompat to go Material

• The Material Theme

• Toolbar

• CardView

• RecycleView

dependencies {

compile "com.android.support:appcompat-v7:21.0.+"

}

Using AppCompat to go Material

dependencies {

compile "com.android.support:appcompat-v7:21.0.+"

}

Using AppCompat: Material Theme

<application

...

android:theme="@style/Theme.AppCompat.Light.NoActionBar”>

Using AppCompat: Toolbar

ActionBar App Bar vs. Toolbar

Goodbye ActionBar tabs.

setSupportActionBar((Toolbar) findViewById(R.id.about_toolbar));

getSupportActionBar().setTitle(getString(R.string.app_name));

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

getSupportActionBar().setHomeButtonEnabled(true);

getSupportActionBar().setElevation(10f); // Only has effect on 5.0+.

Using AppCompat: CardView

<android.support.v7.widget.CardView

android:id="@+id/summary_card"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:cardCornerRadius="3dp"

app:cardElevation="3dp">

<!-- card contents here -->

</android.support.v7.widget.CardView>

* Pro Tip: remember to configure proguard

Using AppCompat: CardView

<android.support.v7.widget.CardView

android:id="@+id/summary_card"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:cardCornerRadius="3dp"

app:cardElevation="3dp">

<!-- card contents here -->

</android.support.v7.widget.CardView>

-dontwarn android.support.v7.**

-keep class android.support.v7.** { *; }

-keep interface android.support.v7.** { *; }

Using AppCompat: RecyclerView

Enhanced view recycling.

<android.support.v7.widget.RecyclerView

android:id="@+id/results_list"

android:layout_width="match_parent"

android:layout_height="match_parent" />

There’s no setEmptyView() or setHeaderView().

RecyclerView’s LinearLayoutManager does not have all the features of ListView’s manager

Using AppCompat to go Material

Walkthrough time.

https://github.com/Turnsole/NSFAwards

New Patterns: Buttons

Flat, also called “ink” buttons

• dialogs

• anywhere depth already has meaning

Floating Action Buttons (FABs)

• “persistent” actions

New Patterns: Floating Action Buttons

New Patterns: Bottom Sheets

Seen before, but encouraged in the Material Design guidelines.

New Patterns: Snackbar

…for when Toast just isn’t enough.

New Patterns: Transition Animations

* Not available in support library.

Add transitions to your theme: <item name="android:windowEnterTransition">@transition/explode</item>

<item name="android:windowExitTransition">@transition/explode</item>

Or, do it from Java:

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

getWindow().setExitTransition(new Explode());

When starting the new Activity, include the scene animation: Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(this).toBundle();

startActivity(intent,bundle);

New Patterns: Transition Animations

In both the first Activity and the one being transitioned to,

provide the same transition name to the shared View.

android:transitionName=“your_transition_name”

Now in Java:

Intent intent = new Intent(this, SecondActivity.class);

ActivityOptions options = ActivityOptions

.makeSceneTransitionAnimation(this, sharedView, ”your_transition_name");

startActivity(intent, options.toBundle());

Material Color: Be Bold

“Limit your selection of colors by choosing three color hues

from the primary palette and one accent color from the

secondary palette. The accent color may or may not need

fallback options.” – Google design guidelines

materialpalette.com

See more

http://www.materialup.com

Collection of Material Design examples from web and mobile

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

Huge design offering from Google, palettes and icons and

redlines…

http://www.materialpalette.com

Color palette generator

See more

What’s next for Material?

Spec update April 14

- tables

- scrolling

- tabbed navigation

- http://www.google.com/design/spec/whats-new/whats-new.html

Questions?

Comments?

Christa Mabee

@chrozophora

github.com/Turnsole/NSFAward

s