Christa Mabee Senior Android Developer, Silicon Valley Trulia Inc. Material Design www.droidcon.ae @droidconae

2. Material Design
Apps From Quantum Paper
Christa Mabee
Trulia Inc.

3. Wait… what?

4. What we’ll cover
Where did Material come from?
The meaning of it all
Using AppCompat to go Material
Material Design Patterns
Material Color

5. Where did Material come from?
http://vrge.co/W2LTsS
iOS gmail image from
http://gmailblog.blogspot.com/2011/01/print-from-your-phone-with-gmail-for.html
The look and feel of Google circa early 2011

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

7. Where did Material come from?
Android stood out with the Holo interface.

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

9. Where did Material come from?

10. Where did Material come from?

11. Where did Material come from?

12. Where did Material come from?
https://material.angularjs.org
https://fezvrasta.github.io/bootstrap-material-design

13. Where did Material come from?
A unified design language is giving Google apps a distinctive aesthetic.

15. The Meaning Of It All
Is this good for us?

16. The Meaning Of It All
Consumer application adoption of Holo was irregular even on
major apps
2011
2012 / 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

17. The Meaning Of It All
Consumer adoption with Material

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

19. The Meaning Of It All
*Skeuomorphism is the practice of
making virtual things look like things in
life.

20. The Meaning Of It All
*Skeuomorphism is the practice of
making virtual things look like things in
life.

21. The Meaning Of It All
*Skeuomorphism is the practice of
making virtual things look like things in
life.

22. The Meaning Of It All
*Skeuomorphism is the practice of
making virtual things look like things in
life.

23. The Meaning Of It All
Polaroid VSCO

24. The Meaning Of It All
Material, in a way, does both.

26. Using AppCompat to go Material
• The Material Theme
• Toolbar
• CardView
• RecycleView
dependencies {
compile "com.android.support:appcompat-v7:21.0.+"
}

27. Using AppCompat to go Material
dependencies {
compile "com.android.support:appcompat-v7:21.0.+"
}

28. Using AppCompat: Material Theme
<application
...
android:theme="@style/Theme.AppCompat.Light.NoActionBar”>

29. 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+.

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

31. 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.** { *; }

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

33. Using AppCompat to go Material
Walkthrough time.
https://github.com/Turnsole/NSFAwards

35. New Patterns: Buttons
Flat, also called “ink” buttons
• dialogs
• anywhere depth already has meaning
Floating Action Buttons (FABs)
• “persistent” actions

36. New Patterns: Floating Action Buttons

37. New Patterns: Bottom Sheets
Seen before, but encouraged in the Material Design guidelines.

38. New Patterns: Snackbar
…for when Toast just isn’t enough.

39. 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);

40. 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());

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

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

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

45. Questions?
Comments?
Christa Mabee
@chrozophora
github.com/Turnsole/NSFAward
s