Wifi: GoogleGuestPSKPass: pUp3EkaP

Android Design101

0

First,

Yonatan LevinGoogle Developer Expert

parahalllevin.yonatan

>100 Cities > 30M usersRuby, Go, Python, Microservices

Ooooops...

Making genetic tests accessible

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

Colu

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

Why we doing all this?

Let the show begin!!

Product: We have new featureDesign: Here the mockupAndroid Developer: It’s an iOS mockupDesign: No problem,

Use the same for Android

Real Story

Agenda for today

LogisticsUnderstanding what we’re doing here

TechnicalUnderstanding what an app design is made of, and why

Tipsand common mistakes - Things you should be aware of

100 Slides, No Breaks

Since November, we’ve created this app

Two year ago we invited designers to our hackathon.We felt like it was great but not enough.

History of this course

We learned these important lessons

1 Session, on the submission day, is not enough.We need to work on designer-developer integration.We need to explain the graphic language better.We need to explain an app’s building blocks better.

History of this course

- One year ago, after we finish fundamentals Android course.

- We felt like we need to add additional step and add a bit of color

History of this course

So, we invited designers to Material Design Course

We learned these important lessons

We need More

and at the right time, Google and released this course.

Android Academy &

Udacity is an online course service, and they host a few Google courses, bundled in a Nano-Degree.We’re doing “Material Design for Android Developers” course.Before each lesson here, we need you to watch the online lesson(s).

Course URL: https://www.udacity.com/course/material-design-for-android-developers--ud862

Android Academy Method

We’ll meet here every tuesday for 2 parts sessions:- A Lesson- Hands-on / Q&A at the Google Campus

Between lessons, you’ll watch some online video lessons,and we also provide you with links so you can research on your own.

Schedule

Date Subject Content: Lecturer

29/1 Design #0 Android Intro & Design (Layout) Yonatan L

5/2 Design #1 Material design conceptsSurfacesBasic views and layoutsNavigation

Yarkoni

14/2 Tuesday

Design #2 Colors, Themes, Shapes, Vectors, Animations & Design Principles

Britt

19/2 Design #3 How to talk designer & developer, Tools.

Shahar A.

Special Things to know

Disclaimer (1)

We are geeky developers.a.We have monochromatic vision

b.For us, 0x9C27B0 is a number, and Deep Purple is a name of a rock band our architect listens to -

c.But we know every brick in this operation system

This course is designed for both designers and developers.XML, Code, Pallette, experience: all of these will be here.

Hackathon

Disclaimer (2)

We have a deadline: 09.03.2016 - The HackathonIt’s a 24 hours event, at the Campus,

We have ONLY 4 lessons, but you’ll need to watch >1 every week.After today, Please watch lessons 1 and 2 from the course.

Disclaimer (2)

We have a deadline: 09/3/2016 - The HackathonSo:

- We’ll focus on Android - not on general design aspects.

- We won’t be able to cover everything in the course.

- The hackathon, and working with a developer to a published app is part of our course.

After today, Please watch lessons 1 and 2 from the course.

Best business card

Developers Designers

Expectations

- Commitment- Come to the sessions

- Preferably, after you’ve watched the lessons.

- Involvement- Mingle, Talk, Explain,

- Team-up.

- Level- Beginners +

- Pick and Know your tools (Photoshop, Illustrator, Whatever…)

How to get in touch

For on-going conversation, use our Facebook group:Android Academy TLVhttps://www.facebook.com/groups/android.academy.ils/

For tickets, we have 2 meetups:Developers:www.meetup.com/TLV-Android-Academy/ Designers: www.meetup.com/Android-Academy-Designers/

We’ll open RSVP to the upcoming meetings in both

every Monday at 19:00

I didn’t get email notification

Am I in the waitlist or …?

Any Questions?

Agenda for today

LogisticsUnderstanding what we’re doing here

TechnicalUnderstanding what an app design is made of, and why

Tipsand common mistakes - Things you should be aware of

100 Slides, This is #23

✔

Material Design:- A set of guidelines- Released in 2014 (with Android Lollipop)- Common grounds for Android Apps- Very detailed,

not very restrictive.

- Read it: https://www.google.com/design/spec/material-design/

Kick-off:https://youtu.be/wtLJPvx7-ys?t=1m16s

But right after that, We go Technical

Learn what an Android Design is.

App Design StructureB

- PDF / Images describing the Structure

of the design RedLines or Style Guide Will

be translated to Layouts

- PDF / Images describing the scales of

the designStyle Guide’s language Will

be translated to XML resources

- Assetsbitmaps / 9-patch in correct directory structure Will be used As-

Is

Application Design zip file

Sample Style Guides

This is the style guide that wasused in the course.

Today, we’ll understand how toread it, and understand what the developer does with it.We’ll see more examples later.See the entire guide: https://s3.amazonaws.com/content.udacity-data.com/course/ud853/Sunshine+Design+Mocks/Sunshine_Visual_Mocks_ALL.pdf

Android’s Mobile Marketshare

Source: IDC http://www.businessinsider.com/idc-smartphone-os-market-share-2015-12

Android’s Mobile Marketshare

Source: Gartner http://www.gartner.com/newsroom/id/3115517

According to Gartner, in 2015 Q2, 82.2% of the world-wide smartphone sales were of

Android smartphones.

That’s 271,010 devices. Samsung’s marketshare during 2015Q2 was 21.9%. (72,072.5)

First android device

HTC Dream

320x480px (2:3)180 ppi3.2” (81mm)

http://en.wikipedia.org/wiki/HTC_Dream

Current Android FlagShip Device

Pixel XL

1440 x 2560 pixels534 ppi5.5”

http://www.gsmarena.com/google_pixel_xl-8345.php

Big Android Device

Nexus 10 (Tablet)

2560x1600px300ppi10.1”

http://en.wikipedia.org/wiki/Nexus_10

Android’s Mobile Marketshare

Android’s biggest problem:There are many kinds of

devices.

Let’s break a Phone’s screen

Data from http://www.gsmarena.com/

Samsung Galaxy S5 mini

720x1280px4.5”

326 dpi

LG G4

1440x2560px5.5”538 dpi

We can’t do Pixel-Perfect Design. That’s not how Android Works.

Resolution (dpi) is differentRatio is

differentScreen

size is different

http://developer.android.com/training/multiscreen/index.html

Reduce the problem

There’s too many DPI values to handle. Let’s split the screens into dpi-classes

Read more: http://developer.android.com/guide/practices/screens_support.html

From px to dp

dp - Device independent Pixel - Android’s length units.Used to abstract the DPI away, and let you work without worrying about screen resolution.100 dp = 75px @ LDPI (x0.75)100px @ MDPI (x1)

150px @ HDPI (x1.5) 200px @ XHDPI (x2)

300px @ XXHDPI (x3) 400px @ XXXHDPI (x4)Convert dp to px: http://labs.rampinteractive.co.uk/android_dp_px_calculator/ Read more: https://en.wikipedia.org/wiki/Device_independent_pixel

Reduce the problem

There’s too many DPI values to handle. Let’s split the screens into dpi-classes

x1

x0.75

x1.5

x2

x3

x4

When to use dp? Everywhere!

When describing screen sizes When describing element sizes,

margins, paddings and etc.

What would happen without dp

The higher density the screen is, The smaller the graphics get. The TextView is measured in px (on the left), there’s only 1 version of the image (on the right).

What happens with dp

When dp is used, and multiple versions are provided, the experience is more consistent.The TextView is measured in dp (on the left), there’s 3 version of the image (on the right) - one for each density.

Supply multiple versions for bitmaps

When designing bitmaps, produce multiple versions of the same asset, scaled for each screen.

Providing multiple versions

All versions have the same filename, but in different folders.res/

drawable-mdpi/btn_graphic.png // bitmap for medium-densitydrawable-hdpi/btn_graphic.png // bitmap for high-densitydrawable-xhdpi/btn_graphic.png // bitmap for extra-high-densitydrawable-xxhdpi/btn_graphic.png // bitmap for extra-extra-high-density

res/mipmap-mdpi/ic_launcher.png // launcher icon for medium-density

mipmap-hdpi/ic_launcher.png // launcher icon for high-densitymipmap-xhdpi/ic_launcher.png // launcher icon for extra-high-densitymipmap-xxhdpi/ic_launcher.png // launcher icon for extra-extra-high-densitymipmap-xxxhdpi/ic_launcher.png // launcher icon for extra-extra-extra-high-

density

http://developer.android.com/guide/practices/screens_support.html

Tip: Bitmap Scale Direction

When scaling images UP, some quality is lost.

So it’s better to draw vectors,or aim at high resolution (x4, xxxhdpi), and scale DOWN.

Use Android Asset StudioOnline tool, available at:https://romannurik.github.io/AndroidAssetStudio/

Helps to create multiple versions of assets,Created by Roman Nurik, which is a cool guy, and also an instructor on the online course.

Naming Conventions

We love order. Patterns make our life easier. PLEASE use these common patterns:ic_ for iconsbtn_ for buttonsbg_ for backgroundsUse lowercase alphabet, numbers and _ (underscore) only.

sp is used for text size

For text sizes, use sp. This enables the user to scale texts up or down.

sp = dp x scale

Definition:

ViewA basic building block for user interface

components. A View occupies a rectangular area (width and height)

on the screen and is responsible for drawing and event handling

Everything on the screen is a view

A View must haveWidth and Heightdp, match_parent,

wrap_contentthese define its bounding boxRead more:

http://developer.android.com/guide/topics/ui/overview.html

Any Questions?

We can’t do Pixel-Perfect Design, Because That’s not how Android Works.Resolution (dpi) is different

Ratio is different

Screen size is different

✔

Different phones has different screen ratio

Samsung Galaxy S6: 16:9 ratio

The DP solution won’t

solve this problem.LG Nexus 5P:49:27 ratio

Solution: Responsive Layout

Instead of creating a pixel-perfect, or dp-perfect, design, we use containers (ViewGroups) that instruct how to lay views out.Each of these can have children views. These will be layed-out according to its parent layout (and could be a layout on its own).Let’s see the 3 most common.

LinearLayout

A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen, and can also distribute length, according to weights.

LinearLayout

VerticalLinearLayout

HorizontalLinearLayoutButton 1 Button 2 Button 3

Button 4 Button 5 Button 6

LinearLayout

VerticalLinearLayout

HorizontalLinearLayoutButton 1 Button 2 Button 3

Button 4 Button 5 Button 6

Width=match_parent Height=match_parent

Width=match_parentHeight=wrap_content

Width=match_parentHeight=0dpWeight=100

Width=0dp Height=match_parentWeight=33

Width=0dp Height=match_parentWeight=33

Width=0dp Height=match_parentWeight=33

ViewGroups and Views create view tree

That’s best described in XML.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="..." android:orientation="vertical" >

<Button android:text="Button 1" android:layout_width="match_parent" android:layout_height="wrap_content" />

<Button android:text="Button 2" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:text="Button 3" android:layout_width="match_parent" android:layout_height="wrap_content" />

<!-- ... --> </LinearLayout>

activity_some_linear_activity.xml

activity_some_linear_activity.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout android:more_stuff="..." >

<Button android:text="Button 1" ... /> <Button android:text="Button 2" ... /> <Button android:text="Button 3" ... /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="100" android:orientation="horizontal" > <Button android:text="Button 4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="33" /> <Button android:text="Button 5" ... /> <Button android:text="Button 6" ... /> </LinearLayout></LinearLayout>

RelativeLayout

Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).

RelativeLayout

When using RelativeLayout, use descriptions such as:Below ofRight ofAlignCenter

FrameLayout

FrameLayouts places views one on-top of each other.

Ordered from bottom to top.

Scroll View

A View that wraps another view (most probably, some layout), and enables scrolling

Tip: Name things in your design

To improve maintainability of the design, name your colors and font styles and sizes, and dimensions, and everything more you like.Examples:color_b2

#ff5722

color_b3#7b1fa2

The Developer takes your design,

and converts it to XML, weaving layouts together.

Then the designer reviews it, and becomes sad :(

dimens.xml<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen>

<!-- font sizes --> <dimen name="fontsize_display4">112sp</dimen> <dimen name="fontsize_display3">56sp</dimen> <dimen name="fontsize_display2">45sp</dimen> <dimen name="fontsize_display1">34sp</dimen></resources>

colors.xml<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="color_b1">#ff5722</color>

<color name="color_b2">#7b1fa2</color>

</resources>

We can’t do Pixel-Perfect Design, Because That’s not how Android Works.Resolution (dpi) is different

Ratio is different

Screen size is different

✔✔

Thanks to , we have some real-world design guides to show you.

REAL Style-guide examples

Lecture #4

- PDF / Images describing the Structure

of the design RedLines or Style Guide Will

be translated to Layouts

- PDF / Images describing the scales of

the designStyle Guide’s language Will

be translated to XML resources

- Assetsbitmaps / 9-patch in correct directory structure Will be used As-

Is

Application Design zip file

Building Blocks

Layout

LinearLayout

RelativeLayout

FrameLayout

ScrollView

Basic ViewsTextViewImageView

Input ControlsButtonEditTextCheckbox

RadioButton

ToggleButtonSpinnerDatePickerTimePicker

Any Questions?

One thing we didn’t talk about:Size Qualifiers apply for layouts

http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali

Agenda for today

LogisticsUnderstanding what we’re doing here

TechnicalUnderstanding what an app design is made of, and why

Tipsand common mistakes - Things you should be aware of

100 Slides, This is #23

✔

✔

Common stuff that no-one talks about

TipsC

Bonus Part

These are things that are usually skipped, but are important part of creating an android design.

A Musical Pause

Expectations Demo by Bobby McFerrin

https://youtu.be/ne6tB2KiZuk

BePure

Android

http://developer.android.com/design/patterns/pure-android.html

What’s special about Android?

- Navigation- The device has a back button

- The toolbar can have an Up button

- UIs- Toasts / SnackBars

- Notifications (Icons / Drawer)

- Widgets (oh, and home vs. launcher)

- Animations

Don’t duplicate other platform’s design

Here’s a sample of how common controls look on different platforms

Platforms typically provide a carefully designed set of UI elements that are themed in a very distinctive fashion.

Don’t duplicate other platform’s design

Same principle goes for icons.

Don’t use Bottom Tabs

Android uses soft buttons, docked to the bottom of the screen.Placing navigation there, for Android users, is TORTURE.

Internationalization

Besides thinking about text sizes in sp, you should also consider lengthy (and shorty) translations.English: Repeat passwordGerman: Wiederholen Sie das PasswortChinese: 重复密码read: https://www.smashingmagazine.com/2012/07/12-commandments-software-localization/ Ignore Web stuff

Any Questions?

Sketch paperhttp://www.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/

Summary

A guideline that helps creating beautiful apps, which is easier to implement,easier for users to understand and hopefully, succeed more.Our next 2 lessons are dedicated to this subject.

Material Design

- PDF / Images describing the Structure

of the design RedLines or Style Guide Will

be translated to Layouts

- PDF / Images describing the scales of

the designStyle Guide’s language Will

be translated to XML resources

- Assetsbitmaps / 9-patch in correct directory structure Will be used As-

Is

Application Design zip file

Use dp and sp, and don’t forget i18n

Provide multiple versions

All versions have the same filename, but in different folders.res/

drawable-mdpi/graphic.png // bitmap for medium-densitydrawable-hdpi/graphic.png // bitmap for high-densitydrawable-xhdpi/graphic.png // bitmap for extra-high-densitydrawable-xxhdpi/graphic.png // bitmap for extra-extra-high-density

res/mipmap-mdpi/my_icon.png // launcher icon for medium-density

mipmap-hdpi/my_icon.png // launcher icon for high-densitymipmap-xhdpi/my_icon.png // launcher icon for extra-high-densitymipmap-xxhdpi/my_icon.png // launcher icon for extra-extra-high-densitymipmap-xxxhdpi/my_icon.png // launcher icon for extra-extra-extra-high-density

http://developer.android.com/guide/practices/screens_support.html

Naming Conventions

ic_ for iconsbtn_ for buttonsbg_ for backgroundsUse lowercase alphabet, numbers and _ (underscore) only.

Building blocks: Layouts (and Scroll)

Building Blocks

LayoutLinearLayoutRelativeLayoutFrameLayoutScrollView

Basic Views

TextView

ImageView

Input ControlsButtonEditTextCheckbox

RadioButton

ToggleButtonSpinnerDatePickerTimePicker

Watch lessons 1+2 from the Udacity coursehttps://www.udacity.com/course/developing-android-apps--ud862

Join meetup and facebook grouphttps://www.facebook.com/groups/android.academy.ils/www.meetup.com/Android-Academy-Designers/ www.meetup.com/TLV-Android-Academy/

Optional:RTFM:

https://www.google.com/design/spec/material-design/introduction.html Read this intro: http://androidux.com/Beginner-guideRead about Pure Andorid:

http://developer.android.com/design/patterns/pure-android.html watch more about Material: Design Principles (2014):

https://youtu.be/isYZXwaP3Q4 Structure and components (2014):

https://youtu.be/dZqzz5lZFvo Material Now (2015):

https://youtu.be/8UicJ0SxBwA

Homework

Next up

let’s go out and mingle. Make yourself a cup of coffee, Team-up.

Next week, (2/2/2016)Lecture:Surfaces, Controls, Themes

Thank you

Drive Home Safely