This document provides information about an Android Academy community event on Material Design concepts and implementation. It begins with introducing Jonathan Yarkoni from IronSource who will be presenting. It then provides details about the event, including that it will cover Material Design concepts, properties, and components like navigation. The document discusses Material Design principles and how they were developed. It provides examples of Material components like cards, toolbars, and tabs. Finally, it discusses implementing Material Design on older Android versions using the Android Support Library.

1. https://goo.gl/forms/xWbhO
ultl5GDLDzS2

2. Designers Developers

3. pUp3EkaP

4. First,

5. Yarkoni
IronSource
Android Academy

6. ~ 2000 members Largest Android Active Community

7. Jonathan
Yarkoni
Android Leader
Ironsource
Android Academy Staff
Yonatan Levin
Android
Google Developer
Expert
Britt Barak
Android Lead
Figure8
Yossi Segev
Android Developer
Colu
Shahar
Avigezer
Android Developer
Hello Heart

8. Community Mentors

9. What Do We Do?
●Android Fundamentals - Done
● Android UI / UX - 29/1 !
● Community Hackathon - 9/3 !!!
●Android Performance
●Mentors Program

10. Best business card

11. J. Yarkoni
05/02/2017
Material Design
Concepts & Implementation
1

12. What’s For Today?
Material Design
Concepts
Properties
Components
● Navigation

13. Over 1 million apps on the store
We want you to publish your app.
1 in 3 new apps is released as material!

14. Recap - Basic Components
FrameLayout
LinearLayout
RelativeLayout
GridView
RecyclerView (ListView)

15. What is Material?

16. We challenged ourselves to create a visual language
for our users that synthesizes the classic
principles of good design with the innovation and
possibility of technology and science - This is
material design.

17. Inspiration

18. Why Material?

19. Material Design
- Started as a functional bare necessity framework.
- Now it is time to pay attention to the details.

21. Material Design
Not a set of rules.
A set of guidelines
Very detailed,
not very restrictive
Cross platform.
https://www.google.com/design/spec/material-design/

24. Material design principles
Metaphor - unifying theory of rationalized space and system
of motion.

26. Surfaces
Mobile is a medium for delivering content.
We need a container for content.

27. From the Real World

29. Properties

30. Paper & Ink - real world
Paper is a simple shape
Paper is colorless
Paper is constrained by the Z depth
Paper Flat never tiltted never flips over
Every pixel is a dot
Ink is restricted by the paper

32. Translating Paper into Device
3D world
Each layer 1 dp thickness.
Conveys relevance.
Create a consistent
illusion.

33. Paper & Ink

34. Paper & Ink

35. Paper & Ink

36. Paper & Ink

37. Paper & Ink

38. Shadows

39. Shadows

40. Perceived depth

41. build.gradle
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp" />

42. build.gradle
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="8dp" />

43. build.gradle
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="16dp" />

46. Elevation

47. Paper & Ink
https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-
android-

48. Shadow & Lighting - example
Depth of the phone

49. Shadow & Lighting - example
Depth of the phone

50. Surfaces - In practice

51. Surfaces - food for thought

52. Material design principles
Bold, Graphic & Intentional - immerse the user in the
experience.
Dictionary - not hesitating to break the rules of the state or quality of conforming to conventionally accepted standards of behavior or morals.

53. Typography

54. Bold
Typography

55. Color

56. Color Hierarchy

57. Color Palette - example

58. Color Palette
●TIP : 2-3 hues of primary + 1 accent color

59. Palette Class
Extracting palette from image

60. Material design principles
Motion provides meaning - respect the user as the prime
mover.

61. Should feel natural

64. Animations Are Important
●Draws the eye.
●Instruct user.
●Continuous experience.
●Delightful details.
●User feedback.

65. Continuous Experience
Relations between screens
Shared elements.
Activity transitions.

66. Respect the user

67. Triggers & touch feedback
●Targets size : 48dp (7-9mm)
●Feedback for ALL touchable elements
○ standard button
○ Ripples
○ Selectors

70. Guidelines

71. The App Should Guide the User

72. Components
Cards
Toolbar
Appbar
Tabs
Navigation drawer
Snack bar

73. activity_main.xml
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<!-- Insert Content -->
</android.support.v7.widget.CardView>

77. activity_main.xml
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

79. activity_main.xml
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

83. activity_main.xml
<android.support.design.widget.AppBarLayout
android:layout_height="160dp"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

86. Supports both fixed and scrollable.

87. Supports both fixed and scrollable.

88. activity_main.xml
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>

89. activity_main.xml
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>

95. activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

96. nav_header_main.xml
<LinearLayout ...>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@android:drawable/sym_def_app_icon"/>
<TextView
...
android:text="NavDrawer"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
<TextView
...
android:text="example"/>
</LinearLayout>

97. activity_main_drawer.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
...
</group>
...
</menu>

99. activity_main.xml
<android.support.design.widget.AppBarLayout ...>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar .../>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

100. activity_main.xml
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_scrolling"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ironsource.collapsingtoolbar.ScrollingActivity">
<TextView ... />
</android.support.v4.widget.NestedScrollView>

103. FAB do’s and don’ts

104. FAB do’s and don’ts

109. activity_main.xml
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_dialer"/>

110. MainActivity.xml
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH)
.setAction("Action", null)
.show();
}
});

111. FAB - floating action button
FAB can morph.
FAB can move.

116. MainActivity.xml
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH)
.setAction("Action", null)
.show();
}
});

117. ~TOASTS~

118. snackbar
Dialogs
interruptive.
2 actions at max.
use for critical moments.
Toasts
Easily overlooked.
no actions.

119. snackbar
One action.
Use for aiding the user and giving information.
Unpanic~!

121. What if I develop for older versions?

122. The Android Support Library package is a set of code
libraries that provide backward-compatible versions of
Android framework APIs as well as features that are only
available through the library APIs.

123. Android Support Library
Set of code libraries (function).
Provide back-wards compatibility for older versions.
Provide new features.

124. Android Support Library
Set of code libraries (function).
Released Independently.
Provide back-wards compatibility for older versions.
Provide new features.

125. build.gradle
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

126. Navigation

128. Navigation
BackStack.
Back vs. Home
Activity A
Activity B
Activity C

129. Home Press

130. Back Press

131. Notifications
Types
Status bar.
Heads up.
LockScreen.
Expandable.
Actions.

132. Status bar

133. Heads up

134. Lockscreen

135. Expandable

136. Actions

137. MainActivity.java
Intent resultIntent = new Intent(this, MainActivity.class);
PendingIntent resultPendingIntent = PendingIntent.getActivity(this, 0,
resultIntent, PendingIntent.FLAG_UPDATE_CURRENT);

138. MainActivity.java
NotificationCompat.Builder mBuilder = new
NotificationCompat.Builder(this).setSmallIcon(R.drawable.ic_menu_camera)
.setContentTitle("My notification")
.setContentText("Hello World!")
.setContentIntent(resultPendingIntent);

139. MainActivity.java
int mNotificationId = 001;
NotificationManager mNotifyMgr = (NotificationManager)
getSystemService(NOTIFICATION_SERVICE);
mNotifyMgr.notify(mNotificationId, mBuilder.build());

140. 34th floor

141. Drive home safe
See you next Tuesday!

142. Hackathon

143. Designers Developers

144. https://goo.gl/forms/xWbhO
ultl5GDLDzS2