LECTURE NOTES

Week ke – 4

Material Design

Mobile Programming
 LEARNING OUTCOMES

1. Peserta diharapkan mampu menggunakan material design

OUTLINE MATERI :

1. Material design

2. RecyclerView

Mobile Programming
 ISI MATERI

Material Design

Desain Material adalah filosofi desain visual yang dibuat Google tahun 2014.
Tujuan Desain Material adalah pengalaman pengguna terpadu lintas platform dan
ukuran perangkat. Desain Material menyertakan serangkaian panduan untuk gaya,
layout, gerakan, dan aspek desain aplikasi lainnya. Panduan lengkap tersedia di
https://material.io/design.

Prinsip Material Design

Metafora "material"

Dalam Desain Material, elemen dalam aplikasi Android Kita berperilaku seperti
material sungguhan: mentransmisikan bayangan, menempati ruang, dan saling
berinteraksi.

Menyolok, grafik, intensional

Desain Material melibatkan pilihan warna yang disengaja, citra detail, tipografi
skala besar, dan ruang putih intensional yang menghasilkan antarmuka yang
menyolok dan grafik.

Beri penekanan pada tindakan pengguna dalam aplikasi Kita, sehingga pengguna
langsung tahu apa yang harus dilakukan, dan cara melakukannya. Misalnya, sorot
hal-hal yang bisa berinteraksi dengan pengguna, seperti tombol, bidang EditText,
dan switch.

Mobile Programming
Gerakan bermakna

Buat animasi dan gerakan lain dalam aplikasi Kita menjadi bermakna, sehingga
gerakan tidak terjadi secara acak. Gunakan gerakan untuk memperkuat ide bahwa
pengguna adalah penggerak utama aplikasi. Misalnya, desain aplikasi Kita
sehingga sebagian besar gerakan diinisiasi oleh tindakan pengguna, bukan oleh
kejadian di luar kontrol pengguna. Kita juga bisa menggunakan gerakan untuk
memfokuskan perhatian pengguna, memberi masukan yang halus bagi pengguna,
atau menyoroti elemen aplikasi Kita.

Bila aplikasi Kita menghadirkan suatu objek kepada pengguna, pastikan

gerakannya tidak memotong keberlangsungan pengalaman pengguna. Misalnya,
pengguna seharusnya tidak perlu menunggu animasi atau transisi selesai.

Fondasi material design

Berikut adalah beberapa fondasi dari material desain yang berguna untuk diketahui:

Layout

Berisi tentang informasi layout ketika kita mendesain untuk platform ini, material
design sendiri menggunakan sistem yang responsif, sehingga di sarankan untuk
menggunakan sistem grid dalam mendesain sebuah produk, tujuan nya ketika kita
mendesain untuk smartphone, desain kita akan otomatis berubah ketika di gunakan
di paltform yang berbeda ukuran layar nya , contohnya tablet.

Navigasi

Navigasi yang dimaksud adalah interaksi perpindahan dari satu page ke page yang
lain, ada beberapa navigasi di material design

Mobile Programming
 • Lateral navigation

Navigasi ini mengacu pada perpindahan antar layar atau page pada tingkat
hierarki yang sama, komponen navigasi ini harus menyediakan akses ke
semua layar di tingkat navigasi yang sama ini, biasanya navigasi ini banyak
di gunakan di halamann depan atau home page pada sebuah aplikasi.

• Forward navigation

Navigasi ini mengacu pada perpindahan antar layar pada level hierarki yang
lebih dalam. kebanyakan navigasi ini dapak di akses oleh sebuah button
atau element design yang lain.

• Reverse navigation

Navigasi ini adalah kebalikan dari Forward navigation diatas, navigasi ini
mengacu pada perpindahan layar untuk balik dari layar sebelumnya, dan ini
adalah hal wajib untuk memberi akses ke pengguna untuk bisa balik ke
layar sebelumnya.

Navigasi Drawer

Navigasi drawer adalah navigasi utama yang paling sering digunakan di material
design, navigasi ini juga banyak disebut sebagai “hamburger menu” karena
biasanya navigasi ini di trigger oleh icon yang menyerupai nama makanan tersebut
(biasanya icon 3 baris menumpuk secara horizontal).

Untuk menggunakan navigasi ini harus memerhatikan beberapa hal, yang pertama
adalah harus jelas dan bisa di akses dengan mudah, apalagi jika drawer digunakan
untuk navigasi utama. yang kedua adalah harus teroganisir, jika menu yang ingin
diakses di drawer menu banyak, maka bisa di kelompokan sesuai konteks sehingga
bisa mempermudah user untuk menggunakan nya.

Mobile Programming
Bottom Navigasi

Bottom Navigasi sering dijumpai di aplikasi di IOS platform, pengguna iPhone

pasti sangat familiar dengan jenis navigasi ini. tetapi akhir — akhir ini navigasi ini
juga di terapkan di material design standart, Bottom navigasi menampilkan tiga
hingga lima tujuan di bagian bawah layar. Setiap tujuan diwakili oleh ikon dan
label teks opsional.

Selain beberapa hal diatas, ada pula terkait Layout, Color, typography, sound,
shape, motion, interaction, communication dan lainnya.

RecyclerView

Saat Kita menampilkan banyak item dalam daftar yang bisa digulir, sebagian
besar item tidak terlihat. Misalnya, dalam daftar kata yang panjang atau banyak
judul berita, pengguna hanya melihat sedikit item daftar untuk setiap kalinya.
Atau, Kita bisa memiliki kumpulan data yang akan berubah saat pengguna
berinteraksi dengannya. Jika Kita membuat tampilan baru setiap kali data
berubah, itu juga membuat banyak tampilan, bahkan untuk kumpulan data yang
kecil.

Dari perspektif kinerja, Kita bisa meminimalkan jumlah tampilan yang disimpan
pada titik tertentu (Memori), dan jumlah tampilan yang harus Kita buat (Waktu).
Kedua tujuan ini bisa dicapai dengan membuat agak lebih banyak tampilan
daripada yang bisa dilihat pengguna pada layar, dan buat cache serta gunakan
kembali tampilan yang dibuat sebelumnya dengan data berbeda saat pengguna
menggulir ke dalam dan ke luar tampilan.

Kelas RecyclerView adalah versi ListView yang lebih canggih dan fleksibel.
Widget ini adalah kontainer untuk menampilkan rangkaian data besar yang bisa

Mobile Programming
digulir secara sangat efisien dengan mempertahankan tampilan dalam jumlah
terbatas.

widget RecyclerView tepat digunakan bila Kita perlu menampilkan banyak data
yang bisa digulir, atau kumpulan data dengan elemen yang berubah pada waktu
proses berdasarkan aksi pengguna atau kejadian jaringan.

Mobile Programming
RecyclerView adalah:

• Suatu grup Tampilan untuk kontainer yang bisa digulir

• Ideal untuk daftar item serupa yang panjang

• Hanya menggunakan tampilan dalam jumlah terbatas yang digunakan

kembali saat tampilan tersebut tidak tampak di layar. Hal ini menghemat
memori dan mempercepat pembaruan item daftar saat pengguna menggulir
data, karena tidak perlu membuat tampilan baru untuk setiap item yang
muncul.

• Secara umum, RecyclerView menyimpan sebanyak mungkin tampilan item

yang muat di layar, plus sedikit tambahan pada setiap akhir daftar untuk
memastikan pengguliran berjalan cepat dan lancar.

Komponen Recycler View

Untuk menampilkan data dalam RecyclerView, Kita memerlukan bagian berikut:

• Data. Tidak penting dari mana asal data. Kita bisa mendapatkan data baik
dari data yang ada di perangkat maupun data yang tersimpan di cloud.

• RecyclerView. Daftar gulir yang berisi item daftar.

• Instance RecyclerView sebagaimana didefinisikan dalam file layout

aktivitas Kita akan bertindak sebagai kontainer tampilan.

• Layout untuk satu item data. Semua item daftar tampak sama, sehingga
Kita bisa menggunakan layout yang sama untuk semuanya. Layout item
harus dibuat secara terpisah dari layout aktivitas, sehingga satu per satu
tampilan item bisa dibuat dan diisi data.

Mobile Programming
• Pengelola layout Pengelola layout menangani penyusunan (layout)
komponen antarmuka pengguna dalam suatu tampilan. Semua grup
tampilan memiliki pengelola layout. Untuk LinearLayout, sistem Android
menangani layout untuk Kita. RecyclerView memerlukan pengelola layout
eksplisit untuk mengelola susunan item daftar yang terdapat di dalamnya.
Layout ini bisa vertikal, horizontal, atau berupa petak.

• Pengelola layout adalah instance dari Recyclerview.LayoutManager untuk

menyusun layout item dalam RecyclerView

• Adapter. Adapter menghubungkan data Kita dengan RecyclerView.

Adapter menyiapkan data dan cara menampilkan data dalam view holder.
Bila data berubah, adapter akan memperbarui materi tampilan item daftar
terkait dalam RecyclerView.

• Adapter juga merupakan ekstensi dari RecyclerView.Adapter. Adapter

menggunakan ViewHolder untuk menampung tampilan yang menyusun
setiap item dalam RecyclerView, dan mengikat data untuk ditampilkan
dalam tampilan yang menampilkannya.

• View holder. View holder memperluas kelas ViewHolder. View holder

berisi tampilan informasi untuk menampilkan satu item dari layout item.

• View holder digunakan oleh adapter untuk menyediakan data, yang

merupakan ekstensi dari RecyclerView.ViewHolder

Mobile Programming
Diagram di bawah ini menampilkan hubungan antara komponen-komponen ini.

Mobile Programming
 DAFTAR PUSTAKA

- Mobile Applications: Architecture, Design, and Development Chapter 4

- SM04a - Material Design for Android

https://developer.android.com/guide/topics/ui/look-and-feel

- SM04b - Kursus Dasar-Dasar Developer Android https://google-developer-

training.github.io/android-developer-fundamentals-course-
concepts/idn/Unit%202/52_c_material_design.html

Mobile Programming