Android UI ImplementationBy Ibnu Sina Wardy (Twitter: @iboen)CEO of PT GITS Indonesiawww.gits.co.id

Background

• Banyaknya workshop pemrograman Android

• Aplikasi lokal yang masuk ke market banyak yang kurang sentuhan desain

• Desainer perlu diberi pencerahan, tentang apa saja yang harus dibuat

• Kurangnya kemampuan programmer untuk mengimplementasikan desain yang telah dibuat desainer

Design Tools

• Adobe Photoshop• Adobe Ilustrator• Corel Draw• Inkscape

• Paint?

Design: Photoshop

Design: Slicing

Design: Nine Patch

Tanpa 9-patch

Sudah dikecilkan

Dengan 9-patch

Demo: Photoshop

Android XML

Padding & Margin

• Sederhana tapi terlupakan

• Padding = jarak ke dalam• Margin = jarak ke luar

Padding vs Margin

Padding Margin

The Implementation of Space

Tanpa padding dan margin Dengan padding dan margin

DIMENSION

Dimension for TabletNexus S Galaxy Tab 10.1

dimens.xml/values/dimens.xml

/values-sw600dp/dimens.xml

Dimension compatibilityNexus S Galaxy Tab 10.1

IMAGE RESOURCE

Provide multiple images

• res/drawable-ldpi/my_icon.png • Gambar untuk low-density (Galaxy Mini)

• res/drawable-mdpi/my_icon.png • Gambar untuk medium-density (HTC Hero)

• res/drawable-hdpi/my_icon.png • Gambar untuk high-density (HTC Desire)

• res/drawable-xhdpi/my_icon.png • Gambar untuk extra-high-density (Tablet)

If you are lazy…• res/drawable-xhdpi/my_icon.png • Gambar untuk extra-high-density (Tablet)• Hanya sediakan untuk resolusi tablet• Umumnya, ukurannya dua kali dari mdpi• Ukuran splash screen: 1280 x 800 pixel

• res/drawable-xhdpi/ic_pesawat.png • Ukuran file yang dibuat adalah: 80px x 120px

FRAGMENT & VIEW PAGER

View Pager

View Pager

View Pager Library• JakeWharton / Android-ViewPagerIndicator• https://github.com/JakeWharton/Android-ViewPagerIndicator/

• astuetz / ViewPagerExtensions• https://github.com/astuetz/ViewPagerExtensions

ACTION BAR

Good Bye Option Menu• ActionBar hanya support untuk Honeycomb dan ke atas

Action Bar Library

Agar support untuk Honeycomb ke bawah, dapat gunakan library:

• Holo Everywhere• http://www.holoeverywhere.com/

• ActionBarSherlock• http://actionbarsherlock.com/

DESIGN REFERENCE

Useful for you• Android App Patterns• http://www.android-app-patterns.com

• android pttrns• http://androidpttrns.com/

PT GITS Indonesia. Address: Jl Jatimulya 1 No. 14. Bandung. Email: www.gits.co.id