MDC-104 Android: Komponen Lanjutan Material (Kotlin)

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MDC memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web, dan Flutter. material.io/develop

Di codelab MDC-103, Anda menyesuaikan warna, ketinggian, dan tipografi Komponen Material (MDC) untuk memberikan gaya ke aplikasi Anda.

Komponen di sistem Desain Material menjalankan tugas yang telah ditentukan sebelumnya dan memiliki karakteristik tertentu, seperti tombol. Namun, tombol bukan sekadar cara bagi pengguna untuk melakukan tindakan. Tombol juga merupakan ekspresi visual dari bentuk, ukuran, dan warna yang memberi tahu pengguna bahwa ini adalah hal yang interaktif dan akan terjadi sesuatu saat disentuh atau diklik.

Pedoman Desain Material menjelaskan komponen dari sudut pandang desainer. Pedoman ini menjelaskan berbagai fungsi dasar yang tersedia di seluruh platform, serta elemen anatomi yang menyusun setiap komponen. Misalnya, tampilan latar berisi lapisan belakang dan kontennya, lapisan depan dan kontennya, aturan gerakan, dan opsi tampilan. Setiap komponen ini dapat disesuaikan untuk kebutuhan, kasus penggunaan, dan konten setiap aplikasi. Sebagian besar dari bagian ini adalah tampilan, kontrol, dan fungsi tradisional dari SDK platform Anda.

Meskipun pedoman Desain Material menyebutkan banyak komponen, tidak semua komponen tersebut adalah kandidat yang baik untuk kode yang dapat digunakan kembali, dan karena itu tidak ditemukan di MDC. Anda dapat membuat pengalaman ini sendiri untuk mencapai gaya yang disesuaikan untuk aplikasi Anda, semua menggunakan kode tradisional.

Yang akan Anda bangun

Dalam codelab ini, Anda akan menambahkan latar belakang ke Shrine. Menu ini akan memfilter produk yang ditampilkan dalam petak asimetris menurut kategori. Anda akan menggunakan:

• Bentuk
• Gerakan
• Kelas Android SDK tradisional

Ini adalah codelab terakhir dari 4 yang memandu Anda membangun aplikasi untuk sebuah produk yang disebut Shrine. Sebaiknya pelajari semua codelab secara berurutan karena Anda perlu menyelesaikan setiap tugas langkah demi langkah. Codelab terkait dapat ditemukan di: MDC-101: Dasar-dasar Komponen Material (MDC) MDC-102: Tata Letak dan Struktur Desain Material. MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis

Komponen MDC-Android dalam codelab ini

• Bentuk

Yang Anda butuhkan

• Pengetahuan dasar tentang pengembangan Android
• Android Studio (download di sini jika Anda belum memilikinya)
• Emulator atau perangkat Android (tersedia melalui Android Studio)
• Kode contoh (lihat langkah berikutnya)

Bagaimana Anda menilai tingkat pengalaman Anda membuat aplikasi Android?

Pemula Menengah Mahir

Melanjutkan dari MDC-103?

Jika Anda sudah menyelesaikan MDC-103, kode Anda seharusnya siap untuk codelab ini. Langsung ke langkah 3.

Memulai dari awal?

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-android-codelabs-104-starter/kotlin. Pastikan untuk cd ke direktori tersebut sebelum memulai.

...atau meng-clone codelab dari GitHub

Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-starter

Untuk mendapatkan bantuan lebih lanjut: Meng-clone repositori dari GitHub

Memuat kode awal di Android Studio

1. Setelah wizard penyiapan selesai dan jendela Welcome to Android Studio ditampilkan, klik Open an existing Android Studio project. Buka direktori tempat Anda menginstal kode contoh, lalu pilih kotlin -> shrine (atau telusuri shrine di komputer Anda) untuk membuka project Shipping.
2. Tunggu Android Studio mem-build dan menyinkronkan project, seperti yang ditunjukkan oleh indikator aktivitas di bagian bawah jendela Android Studio.
3. Pada tahap ini, Android Studio dapat memunculkan beberapa error build karena alat build atau Android SDK tidak ada, seperti yang ditampilkan di bawah. Ikuti petunjuk di Android Studio untuk menginstal/mengupdate versi ini dan menyinkronkan project Anda.

Menambahkan dependensi project

Project memerlukan dependensi pada support library MDC Android. Kode contoh yang Anda download seharusnya sudah mencantumkan dependensi ini, tetapi sebaiknya lakukan langkah-langkah berikut untuk memastikannya.

1. Buka file build.gradle modul app dan pastikan blok dependencies menyertakan dependensi pada MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opsional) Jika perlu, edit file build.gradle untuk menambahkan dependensi berikut dan sinkronkan project.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Menjalankan aplikasi awal

Pastikan bahwa konfigurasi build di sebelah kiri tombol Run / Play adalah app. Tekan tombol Run/Play berwarna hijau untuk mem-build dan menjalankan aplikasi. Di jendela Select Deployment Target, jika perangkat Android sudah tercantum di perangkat Anda yang tersedia, lewati ke Langkah 8. Jika tidak tercantum, klik Create New Virtual Device. Di layar Select Hardware, pilih perangkat ponsel, misalnya Pixel 2, lalu klik Next. Di layar System Image, pilih recent Android version, terutama API level yang paling tinggi. Jika tidak terinstal, klik link Download yang ditampilkan dan selesaikan proses download-nya. Klik Next. Di layar Android Virtual Device (AVD) , biarkan setelan lalu klik Finish. Pilih perangkat Android dari dialog target deployment. Klik Ok. Android Studio mem-build, men-deploy, dan otomatis membuka aplikasi di perangkat target.

Jika Anda gagal menambahkan dependensi atau menjalankan aplikasi, hentikan dan lakukan pemecahan masalah pada lingkungan developer Anda.

Jika Anda mendapatkan error INSTALL_FAILED_INVALID_APK saat mem-build, coba lakukan ‘Build' -> ‘Clean Project' di Android Studio.

Berhasil! Anda akan melihat aplikasi Shrine berjalan di perangkat Anda.

Latar belakang adalah permukaan paling belakang aplikasi, yang muncul di belakang semua konten dan komponen lainnya. Hal ini terdiri dari dua platform: lapisan belakang (yang menampilkan tindakan dan filter) dan lapisan depan (yang menampilkan konten). Anda dapat menggunakan latar belakang untuk menampilkan tindakan dan informasi yang interaktif, seperti navigasi atau filter konten.

Menyembunyikan konten petak

Di shr_product_grid_fragment.xml, tambahkan atribut android:visibility="gone" ke NestedScrollView untuk menghapus konten produk sementara:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Kita akan memasang latar belakang di wilayah ini. Untuk menghindari tampilan pembagian antara panel aplikasi atas dan konten menu yang muncul di latar belakang, kita akan membuat latar belakang memiliki warna yang sama dengan panel aplikasi atas.

Di shr_product_grid_fragment.xml, tambahkan kode berikut sebagai elemen pertama di FrameLayout root Anda, sebelum AppBarLayout:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

Di styles.xml, tambahkan kode berikut:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Bagus! Anda telah menambahkan latar belakang yang indah ke UI Shrine. Selanjutnya, kita akan menambahkan menu.

Menambahkan menu

Pada dasarnya, menu adalah daftar tombol teks. Kita akan menambahkan satu di sini.

Buat file tata letak baru bernama shr_backdrop.xml di direktori res -> layout, lalu tambahkan kode berikut:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

Lalu, tambahkan daftar ini ke LinearLayout yang baru saja Anda tambahkan di shr_product_grid_fragment.xml menggunakan tag <include>:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Build dan jalankan. Layar utama Anda akan terlihat seperti ini:

Sekarang kita telah menyiapkan latar belakang. Mari kita tampilkan kembali konten yang kita sembunyikan sebelumnya.

Sebelum kami melakukan perubahan apa pun pada Shrine dalam codelab ini, konten produk utama terletak di permukaan paling belakang. Dengan menambahkan latar belakang, konten ini kini lebih ditekankan karena muncul di depan latar belakang tersebut.

Menambahkan lapisan baru

Kita harus menampilkan kembali lapisan petak produk. Hapus atribut android:visibility="gone" dari NestedScrollView Anda:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Mari kita beri gaya lapisan depan dengan potongan di pojok kiri atas. Desain Material mengacu pada jenis penyesuaian ini sebagai bentuk. Permukaan material dapat ditampilkan dalam berbagai bentuk. Bentuk menambahkan penekanan dan gaya pada platform dan dapat digunakan untuk mengekspresikan branding. Bentuk material dapat memiliki sudut dan tepi yang melengkung atau miring, serta berapa pun jumlah sisinya. Bentuknya dapat bersifat simetris atau tidak beraturan.

Menambahkan bentuk

Ubah bentuk petak. Kita telah menyediakan latar belakang bentuk kustom, tetapi bentuk hanya ditampilkan dengan benar di Android Marshmallow dan yang lebih baru. Kita dapat menyetel latar belakang shr_product_grid_background_shape di NestedScrollView Anda hanya untuk Android Marshmallow dan yang lebih baru. Pertama, tambahkan id ke NestedScrollView agar kita dapat mereferensikannya dalam kode, sebagai berikut:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Kemudian, tetapkan latar belakang secara terprogram di ProductGridFragment.kt. Tambahkan logika berikut untuk menyetel latar belakang ke akhir onCreateView(), tepat sebelum pernyataan return:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

Terakhir, kita akan memperbarui resource warna productGridBackgroundColor (juga digunakan oleh latar belakang bentuk kustom) sebagai berikut:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Build dan jalankan:

Kita telah memberikan bentuk gaya visual kustom pada platform utama Shrine. Karena ketinggian platform, pengguna dapat melihat bahwa terdapat sesuatu di belakang lapisan putih di depan. Mari tambahkan gerakan agar pengguna dapat melihat apa yang ada di sana: menu.

Gerakan adalah cara untuk membuat aplikasi Anda terlihat hidup. Gerakan dapat berupa gerakan yang besar dan dramatis, gerakan yang halus dan minimal, atau apa pun di antara keduanya. Jenis gerakan yang Anda gunakan harus sesuai dengan situasinya. Gerakan yang diterapkan pada tindakan reguler yang diulang harus kecil dan halus, sehingga tidak memerlukan waktu yang terlalu lama secara berkala. Situasi lain, seperti saat pengguna pertama kali membuka aplikasi, dapat lebih menarik, dan dapat membantu memberi tahu pengguna tentang cara menggunakan aplikasi Anda.

Menambahkan gerakan membuka ke tombol menu

Gerakannya adalah bentuk di depan yang bergerak lurus ke bawah. Kami telah menyediakan pemroses klik untuk Anda yang akan menyelesaikan animasi terjemahan untuk sheet, di NavigationIconClickListener.kt. Kita dapat menyetel pemroses klik ini di onCreateView() ProductGridFragement, di bagian yang bertanggung jawab untuk menyiapkan toolbar. Tambahkan baris berikut untuk menyetel pemroses klik pada ikon menu toolbar:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Bagian tersebut sekarang akan terlihat seperti berikut:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Build dan jalankan. Tekan tombol menu:

Menekan ikon menu navigasi lagi akan menyembunyikannya.

Menyesuaikan gerakan lapisan depan

Gerakan adalah cara yang bagus untuk mengekspresikan merek Anda. Mari kita lihat seperti apa animasi pengungkapan menggunakan kurva waktu yang berbeda.

Perbarui pemroses klik Anda di ProductGridFragment.kt untuk meneruskan Interpolator ke pemroses klik ikon navigasi Anda, sebagai berikut:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

Hal ini menciptakan efek yang berbeda, bukan?

Ikon bermerek juga mencakup ikon familier. Mari lakukan kustomisasi pada ikon reveal dan gabungkan dengan judul kita untuk mendapatkan tampilan bermerek yang unik.

Mengubah ikon tombol menu

Ubah tombol menu untuk menampilkan ikon yang menyertakan desain berlian. Perbarui Toolbar Anda di shr_product_grid_fragment.xml untuk menggunakan ikon bermerek baru yang telah kami sediakan untuk Anda (shr_branded_menu), dan tetapkan atribut app:contentInsetStart dan android:padding untuk membuat toolbar lebih sesuai dengan spesifikasi desainer Anda:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

Kita akan memperbarui kembali pemroses klik di onCreateView() dalam ProductGridFragment.kt untuk mengambil drawable untuk toolbar saat menu terbuka dan saat menu ditutup, sebagai berikut:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

Build dan jalankan:

Bagus! Saat latar belakang dapat ditampilkan, ikon menu berlian akan ditampilkan. Saat menu dapat disembunyikan, ikon tutup akan ditampilkan sebagai gantinya.

Dalam empat codelab ini, Anda telah melihat cara menggunakan Komponen Material untuk membuat pengalaman pengguna yang unik dan elegan yang mengekspresikan gaya dan karakteristik merek.

Aplikasi MDC 104 yang sudah selesai tersedia dengan mendownload codelab yang sudah selesai, atau dengan melihat 104-complete dengan git: git checkout 104-complete.

Anda dapat menguji versi aplikasi Anda berdasarkan aplikasi di cabang tersebut.

Langkah berikutnya

Codelab ini, MDC-104, melengkapi urutan codelab ini. Anda dapat mempelajari lebih lanjut komponen di MDC-Android dengan mengunjungi Katalog Komponen MDC-Android.

Untuk tantangan lebih lanjut dengan codelab ini, ubah aplikasi Shrine Anda untuk mengubah gambar produk yang ditampilkan saat kategori dipilih dari menu latar belakang.

Untuk mempelajari cara menghubungkan aplikasi ini ke Firebase untuk backend yang berfungsi, lihat Firebase Android Codelab.

Saya dapat menyelesaikan codelab ini dengan upaya dan dalam durasi waktu yang wajar

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju

Saya ingin terus menggunakan Komponen Material pada masa mendatang

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju