Friday, September 18, 2015

Android - Materialize your app

Android 5.0 Lollilop telah rilis dengan konsep desain baru yang bernama Material Design. Material design memberikan panduan bagaimana mengembangkan UI untuk visual, motion, action di dalam aplikasi. Jika kita ingin mengadopsi konsep ini, pertama - tama kalian harus membaca detail spesifikasinya yang bisa dilihat disini. Dan tantangannya adalah bagaimana kita mengadopsi Material Design dengan masalah utamanya adalah backward-compatibility.

Solusinya adalah menggunakan Android Design Support Library. Walaupun tidak semua spesifikasinya tersedia tetapi library ini menyediakan komponen - komponen utama Material Design untuk Android 2.1 ke atas.  Berikut daftar komponennya:

1. NavigationView
NavigationView membantu kita untuk menampilkan side navigation, widget ini memiliki 2 atribut penting, yaitu: app:headerlayout (menampilkan layout header) dan app:menu (menampilkan list menu). Berikut contoh penggunaannya:
Dan berikut cara menampilkan menu.

2. Floating Action Button
Floating Action Button berbentuk lingkaran dan menjadi primary action di tampilan layar. Berikut spesifikasinya:




Implementasinya seperti gambar dibawah.

3. Snackbar
Snackbar digunakan untuk quick feedback dan tampil dibawah layar.
Snackbar
Berikut contoh implementasinya.

3. Tabs
Tidak jauh berbeda dengan Tab menggunakan ViewPager. Tetapi dengan menggunakan Tabs komponen ini dan dikombinasikan ViewPager kalian bisa integrasi dengan komponen Collapsing Toolbar.
Tabs
Berikut contoh implementasi dengan integrasi ViewPager.


4. Floating Label dan EditText
Hint text di EditText akan hilang ketika pengguna mengetik karakter pertama. Sekarang kalian bisa membungkus TextInputLayout maka hint text tidak akan hilang melainkan menjadi Floating Label.
Berikut contoh penggunaanya.

Apakah hanya 4 komponen diatas bagaimana melakukan transisi seperti Meaningful Transition. Ya Android Design Support Library juga memberikan solusinya dengan menggunakan CoordinatorLayout, AppBarLayout dan CollapsingToolbarLayout. Berikut contoh penggunaannya:

UI yang dihasilkan kalian bisa lihat disini. Sebenarnya masih ada beberapa library yang lain seperti CardView, AppCompat v21, RecyclerView dan Palette. Yang akan saya bahas di blog berikutnya hehehe.


Download Android Design Support Library:
 compile 'com.android.support:design:22.2.0'

Sumber:
http://android-developers.blogspot.co.id/2015/05/android-design-support-library.html
https://www.google.com/design/spec/material-design/introduction.html
https://developer.android.com/design/material/index.html

No comments:

Post a Comment