android material design lecture #2
TRANSCRIPT
https://goo.gl/forms/xWbhOultl5GDLDzS2
Designers Developers
pUp3EkaP
First,
Yarkoni
IronSource
Android Academy
~ 2000 members Largest Android Active Community
Jonathan Yarkoni
Android Leader Ironsource
Android Academy Staff
Yonatan Levin
Android Google Developer
Expert
Britt Barak
Android LeadFigure8
Yossi Segev
Android DeveloperColu
Shahar Avigezer
Android DeveloperHello Heart
Community Mentors
What Do We Do?
●Android Fundamentals - Done
● Android UI / UX - 29/1 !
● Community Hackathon - 9/3 !!!
●Android Performance
●Mentors Program
●Active community
Best business card
J. Yarkoni05/02/2017
Material Design Concepts & Implementation
1
What’s For Today?
Material Design
Concepts
Properties
Components
● Navigation
● Notifications
Over 1 million apps on the store
We want you to publish your app.
1 in 3 new apps is released as material!
Recap - Basic Components
FrameLayout
LinearLayout
RelativeLayout
GridView
RecyclerView (ListView)
What is Material?
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.
Inspiration
Why Material?
Material Design
- Started as a functional bare necessity framework.
- Now it is time to pay attention to the details.
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/
Material design principles
Metaphor - unifying theory of rationalized space and system
of motion.
Surfaces
Mobile is a medium for delivering content.
We need a container for content.
From the Real World
Properties
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
Translating Paper into Device
3D world
Each layer 1 dp thickness.
Conveys relevance.
Create a consistent
illusion.
Paper & Ink
Paper & Ink
Paper & Ink
Paper & Ink
Paper & Ink
Shadows
Shadows
Perceived depth
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" />
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" />
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" />
Elevation
Paper & Ink
https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-
android-
Shadow & Lighting - example
Depth of the phone
Shadow & Lighting - example
Depth of the phone
Surfaces - In practice
Surfaces - food for thought
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.
Typography
BoldTypography
Color
Color Hierarchy
Color Palette - example
Color Palette
●TIP : 2-3 hues of primary + 1 accent color
Palette Class
Extracting palette from image
Material design principles
Motion provides meaning - respect the user as the prime
mover.
Should feel natural
Animations Are Important
●Draws the eye.
● Instruct user.
●Continuous experience.
●Delightful details.
●User feedback.
Continuous Experience
Relations between screens
Shared elements.
Activity transitions.
Respect the user
Triggers & touch feedback
●Targets size : 48dp (7-9mm)
● Feedback for ALL touchable elements
○ standard button
○ Ripples
○ Selectors
Guidelines
The App Should Guide the User
Components
Cards
Toolbar
Appbar
Tabs
Navigation drawer
Snack bar
CoordinatorLayout
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>
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>
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>
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>
Supports both fixed and scrollable.
Supports both fixed and scrollable.
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"/>
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"/>
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>
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>
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>
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>
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>
FAB do’s and don’ts
FAB do’s and don’ts
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"/>
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();
}
});
FAB - floating action button
FAB can morph.
FAB can move.
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();
}
});
~TOASTS~
snackbar
Dialogs
interruptive.
2 actions at max.
use for critical moments.
Toasts
Easily overlooked.
no actions.
use for simple alerts.
snackbar
One action.
Use for aiding the user and giving information.
Unpanic~!
What if I develop for older versions?
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.
Android Support Library
Set of code libraries (function).
Provide back-wards compatibility for older versions.
Provide new features.
Android Support Library
Set of code libraries (function).
Released Independently.
Provide back-wards compatibility for older versions.
Provide new features.
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'
}
Navigation
Navigation
BackStack.
Back vs. Home
Activity A
Activity B
Activity C
Notifications
Types
Status bar.
Heads up.
LockScreen.
Expandable.
Actions.
Status bar
Heads up
Lockscreen
Expandable
Actions
MainActivity.java
Intent resultIntent = new Intent(this, MainActivity.class);
PendingIntent resultPendingIntent = PendingIntent.getActivity(this, 0,
resultIntent, PendingIntent.FLAG_UPDATE_CURRENT);
MainActivity.java
NotificationCompat.Builder mBuilder = new
NotificationCompat.Builder(this).setSmallIcon(R.drawable.ic_menu_camera)
.setContentTitle("My notification")
.setContentText("Hello World!")
.setContentIntent(resultPendingIntent);
MainActivity.java
int mNotificationId = 001;
NotificationManager mNotifyMgr = (NotificationManager)
getSystemService(NOTIFICATION_SERVICE);
mNotifyMgr.notify(mNotificationId, mBuilder.build());
34th floor
Drive home safe
See you next Tuesday!
Hackathon
Designers Developers
https://goo.gl/forms/xWbhOultl5GDLDzS2