WHERE

DESIGNERS
MEET

DEVELOPERS

(ANDROID)

GoalS

• improve communication
• decrease development time
• help avoid boring work on both sides
  

HOW

• show what's possible
• where are the constraints
• later: iterate
  

Drawables

not only bitmaps

Drawables

9-patch

layer list

inset

clip

shape

state list

level list

Backgrounds

bitmap: 8 MB

9-patch: 1 - 500 kB

shape: ~ 0 kB

so many sizes

240x320

320x480

480x800

720x1280

1080x1920

These were only phones

320x427 dp

320x480 dp

320x533 dp

360x640 dp

360x640 dp

Density independent pixels

• ldpi 0.75
  
• mdpi 1
  
• hdpi 1.5
  
• xhdpi 2
  
• xxhdpi 3
  
• xxxhdpi 4
  

Focus on flexibility

define in %

define margins, paddings

define sizes using images when possible

define sizes as dp only when necessary

Images

You define size of clickable region

Transparent pixels are important

Always remember

pressed state

transitions

communicating errors

showing progress

Pressed state

focused

disabled

selected

checked

checked + focused + disabled

Transitions

you know it better

progress / error

without blocking user

I mean never!

Just to scare you

For button:

4 (or 5) dpis * 5 states

= 20 (or 25) images

For checkbox / radiobutton:

4 (or 5) dpis * 5 states * 2 (un)checked

= 40 (or 50) images

Tools

Action Bar Style Generator

Holo Colors Generator

draw9patch

Communicate intent

different screens + same margin/padding = same name

different screens + same color = same name

Naming Convention

Yes: What is it?

No: Where is it used?

Love_or_hate

names_with_underscores

please_do_that

it_will_ease_devs_work

Last but not least

use Android device

from time to time

THANKS!