How to think like an Android Developer /Designer

Basic Concept on How to Design an Android App

Tab Bar (fixed)

Body (Flexible)

Footer (fixed)

Holo Holo Material Design

Top Bar (fixed)

Body (Flexible)

Footer (fixed)

Tab Bar (fixed)

Body (Flexible)

How to think like Android Developer/Designer

WYSIWYG Android: Everything placed relaCvely to something (Rule-Based)

(0, 40)

(0, 80)

x=0 64 128 192 256

SCck at the boSom

Separate in 5 pieces evenly Below the Top Bar

Below the Tab Bar

Separate in 3 pieces evently

Rule 1: Always think like a Web Designer

More Examples

More Examples

Rule 2: Never expect the UI will be 100% exactly as designed. In Android, it can only be “almost the same”.

Rule 3: Always sCck every single edge to something, in the other word, always STRETCH

Stretch Stretch Stretch

And how Android App is scaled?

Captured from Real Devices

And how Android App is scaled?

Then How?

“Rearrange (by Rule)“

How is Android App scaled?

Captured from Real Devices

In conclusion: In Android world …

•  It doesn’t maSer how detailed the screen is • Only thing maSer is “how physically big” •  Smaller screen size = Same Ctle bar height + less content that can be shown •  Larger screen size = Same Ctle bar height + more content that can be

shown •  That is the another reason why you should develop with 4.5” handset

•  It is an “average” screen size

• Only way to make sure that it works properly is to TEST it!

So actually there are just 4 types of screen we have to deal with (Woo Hoo!)

Does it look weird if we go this way?

• No as well as it is sCll the 4-6” mobile portrait screen •  Yes if screen goes below <3.5” •  So … you might need to minor adjust an UI for damn small screen

(or just … ignore it)

Captured from Real Devices

Another Example

Another Example

Don’t just hard scale

• Android System mechanic doesn’t go that way. Hard scale is the “WRONG” thing

• One of the big reason why most of the Android apps suck • Anyway, pracCcally you can do it but you have to scale it all by code •  If design goes that way, but “you have to understand the Android Screen

FragmentaCon preSy clear first” •  The difference between iOS App Designer and Android App Designer •  The experienced Android Developer could scale iOS design to an Android

one by eyes. And you will … probably you can do by now already =D

More Examples

Basic Concept on How to Design Android App

Tab Bar (fixed)

Body (Flexible)

Footer (fixed)

Holo Holo Material Design

Top Bar (fixed)

QuesCon is how height?

How these things are

laid on the screen?

How many type of

components that we can

place?