dan pengalaman pengguna (User Experience) dari Google yang konsisten di beragam platform dan device. • Merupakan sebuah identitas design UI dan UX untuk Android dan produk Google lainnya • Dikembangkan berdasarkan dua materi dasar : kertas dan tinta • Diperuntukan untuk Android 5.0 (Api Level 21 keatas) namun sudah support untuk backward compability ke pre Android 5.0 • Mengembangkan Material Design di Android Studio sangat disarankan • Dependency Gradle : com.android.support:design:23.0.1
(Migrasi dari Holo Based ke Material) • Widget-widget baru untuk Complex Views seperti RecycledView, CardView, CoordinatorLayout, CollapsingToolbarLayout dsb • Beberapa api baru untuk efek bayangan (elevation) dan animasi seperti : • Activity Transition • View Animation
--> <style name="AppTheme" parent="android:Theme.Material"> <!-- Main theme colors --> <!-- your app branding color for the app bar --> <item name="android:colorPrimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="android:colorPrimaryDark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="android:colorAccent">@color/accent</item> </style> </resources> It’s simpler than Holo :D On your styles.xml
data dalam jumlah yang banyak dan lebih flexible serta sangat efisien ketika user melakukan scroll • RecyclerView menyederhanakan cara penampilan dan menghandle data dalam jumlah yang banyak dengan menyediakan : • LayoutManager untuk posisi item-item yang ada di dalam RecyclerView • Animasi dasar untuk beberapa operasi seperti penghapusan dan penambahan
membuat item dalam RecyclerView ke bentuk kartu (Card) dan akan konsisten di semua platform • Elemen CardView memiliki efek bayangan dan ujung2 yang tidak siku (Rounded)
EditText berpindah menjadi label title pada sebuah EditText. Ini sangat berguna ketika pengguna dihadapkan pada jumlah inputan EditText yang banyak. <android.support.design.widget.TextInputLayout android:id="@+id/til" android:layout_width="fill_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/textDialog" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="First Name"/> </android.support.design.widget.TextInputLayout>
direct action pengguna terhadap sebuah tampilan, misal : untuk membuat email baru pada inbox, menambahkan komentar pada sebuah artikel atau meminta navigasi pada sebuah tampilan peta lokasi.
user untuk memberikan feedback pada sebuah single action, misal ketika menghapus sebuah item maka tampilkan Snackbar yang memberi notifikasi penghapusan item dan sebuah action ‘undo’. Snackbar .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG) .setAction(R.string.snackbar_action, myOnClickListener) .show(); // Don’t forget to show!
lebih dari satu tipe informasi kedalam sebuah tampilan • Dikombinasikan dengan ViewPager dan FragmentPagerAdapter untuk menampilkan fragment-fragment ke layar • Memungkinkan untuk di slide pada title dan klik pada tab title sebagai interaksi dasar <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:scrollbars="horizontal" android:layout_below="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" />
memungkinkan kita untuk memanipulasi bentuk Application Bar sesuai yang dibutuhkan • Cukup dengan setActionBar() maka Toolbar akan menjadi ActionBar pada aplikasi kita dengan catatan isi dari atribut parent pada styles.xml diisi dengan Theme.AppCompat.NoActionBar <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.hmkcode.app.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"/> </RelativeLayout>
dan item view didalam AppBarLayout lebih responsif untuk menghandle interaksi Scroll yang dilakukan oleh pengguna. Ingat bagaimana WhatsApp menggantungkan Tab Indicator ketika pengguna melakukan scroll keatas di halaman home pada salah satu tab nya?
menerima efek animasi Collapse ketika dilakukan scroll oleh pengguna. • Pada item didalam CollapsingToolbarLayout ditambahkan dua tipe collapse effect : • pin (app:layout_collapseMode="pin") atau • parallax (app:layout_collapseMode=“parallax")