Evgeny Belyaev@30PP0Designer, Mail.Ru

AndroidDesign Integration

App design (psd)

Implemented app

?

Of course, DEVELOPERS!!!

Of course, DEVELOPERS!!!

Incorrect Design Specification!

Design specification

- dimensions- gaps- UI colors

- sizes- styles- colors and text styles- spacings

Metrics- assets

Fonts Res

metrics

Close attention should be paid to the integration of design. Because end user sees it on the devicescreen, not the designer's layout.

fonts res

Android

One does not simply integrate your app design for Android.

Device screens:- resolution- screen size

screen densitydip (dots per inch)

Densities:- ldpi (240x320)

- mdpi (320x480)

- hdpi (480x800)

- xhdpi (720x1280)

- xxhdpi (1080x1920)

*

* — popular display resolutions

Density-independent pixel (dp)

1 dp = 1 px at 160 dpi (mdpi)

- ldpi (0.75x)

- mdpi (x)

- hdpi (1.5x)

- xhdpi (2x)

metrics

Metrics

Metrics

xhdpi: 1 dp = 2 px

image size: 50%

1 dp = 1 px

PNG EXPRESS (pngexpress.com)

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

fonts

Fonts

Fonts

Scale-independent pixels (sp)

An SP is scaled by the user's preferred text size, so you should use this measurement unit when defining text size (never for layout sizes).

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

res

Res

Cut&Slice me (cutandslice.me)

Cut&Slice me

1. 3.

2. 4.

xhdpi

Res

button.png

Res

button.png button.9.png

Nine Patch Editor

Nine Patch Editor

“Stretch”in vertical

“Stretch”in horizontal

Content

Content

And now we know how to integrate design into android apps!

Thanks for watching!

Evgeny Belyaev@30PP0Designer, Mail.Ru