Android material design lecture #2

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/

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

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







Elevation

Paper & Ink

https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-

android-

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

Shadow & Lighting - example

Depth of the phone

Surfaces - In practice

Surfaces - food for thought


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 Hierarchy

Color Palette - example

Color Palette

●TIP : 2-3 hues of primary + 1 accent color

Palette Class

Extracting palette from image


Motion provides meaning - respect the user as the prime

mover.

Should feel natural

http://youtube.com/v/01XKCsyIZxE

http://youtube.com/v/01XKCsyIZxE

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">



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

activity_main.xml

<android.support.design.widget.AppBarLayout

android:layout_height="wrap_content"


android:theme="@style/AppTheme.AppBarOverlay">






app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

activity_main.xml

<android.support.design.widget.AppBarLayout

android:layout_height="160dp"


android:theme="@style/AppTheme.AppBarOverlay">






app:popupTheme="@style/AppTheme.PopupOverlay" />


Supports both fixed and scrollable.

activity_main.xml

<android.support.design.widget.TabLayout

android:id="@+id/sliding_tabs"



app:tabMode="scrollable"/>

activity_main.xml

<android.support.design.widget.TabLayout

android:id="@+id/sliding_tabs"



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_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_gravity="start"


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: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"




app:layout_scrollFlags="scroll|exitUntilCollapsed"

app:contentScrim="?attr/colorPrimary">

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

</android.support.design.widget.CollapsingToolbarLayout>


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"



tools:context="com.ironsource.collapsingtoolbar.ScrollingActivity">

<TextView ... />

</android.support.v4.widget.NestedScrollView>

FAB do’s and don’ts

activity_main.xml

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"



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

Home Press

http://youtube.com/v/XdMH5ZV91Qo

http://youtube.com/v/XdMH5ZV91Qo

Back Press

http://youtube.com/v/_IXuikNOe5Y

http://youtube.com/v/_IXuikNOe5Y

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

Android material design lecture #2

Software

Transcript of Android material design lecture #2