MDC-101 Android: Dasar-Dasar Komponen Material (MDC) (Kotlin)

1. Pengantar

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

Apa yang dimaksud dengan Desain Material dan Komponen Material untuk Android?

Desain Material adalah sistem untuk mem-build produk digital yang menarik dan indah. Dengan menyatukan gaya, branding, interaksi, dan gerakan di bawah kumpulan prinsip dan komponen yang konsisten, tim produk dapat mewujudkan potensi desain terbesar mereka.

Untuk aplikasi Android, Komponen Material untuk Android (MDC Android) menyatukan desain dan teknik dengan library komponen untuk menciptakan konsistensi di seluruh aplikasi Anda. Seiring berkembangnya sistem Desain Material, komponen ini diupdate untuk memastikan implementasi pixel-perfect yang konsisten dan kepatuhan terhadap standar pengembangan front-end Google. MDC juga tersedia untuk web, iOS, dan Flutter.

Dalam codelab ini, Anda akan mem-build halaman login menggunakan beberapa komponen MDC Android.

Yang akan Anda bangun

Codelab ini adalah yang pertama dari 4 codelab yang akan memandu Anda mem-build aplikasi bernama Shrine, sebuah aplikasi Android e-commerce yang menjual pakaian dan perlengkapan rumah. Codlab ini akan mendemonstrasikan cara menyesuaikan komponen agar mencerminkan merek atau gaya apa pun menggunakan MDC Android.

Dalam codelab ini, Anda akan mem-build halaman login untuk Shrine yang berisi:

• Dua kolom teks, yang pertama untuk memasukkan nama pengguna dan yang kedua untuk sandi
• Dua tombol, satu untuk "Cancel" dan satu untuk "Next"
• Nama aplikasi (Shrine)
• Gambar logo Shrine

Codelab terkait dapat ditemukan di:

• MDC 102: Tata Letak dan Struktur Desain Material
• MDC 103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis
• MDC 104: Komponen Lanjutan Desain Material

Di akhir MDC 104, Anda akan mem-build aplikasi Android yang terlihat seperti ini:

Komponen MDC Android dalam codelab ini

• Kolom teks
• Tombol

Dalam codelab ini, Anda akan menggunakan komponen default yang disediakan oleh MDC Android. Anda akan mempelajari cara menyesuaikan komponen tersebut di MDC 103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis.

Yang akan 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 mem-build aplikasi Android?

Pemula Menengah Mahir

2. Menyiapkan lingkungan pengembangan

Memulai Android Studio

Saat Anda membuka Android Studio, jendela yang berjudul "Welcome to Android Studio" akan ditampilkan. Namun, jika ini adalah pertama kalinya Anda meluncurkan Android Studio, selesaikan langkah-langkah Wizard Penyiapan Android Studio dengan nilai default. Langkah ini dapat memerlukan waktu beberapa menit untuk mendownload dan menginstal file yang diperlukan, jadi jangan ragu untuk membiarkan proses ini berjalan di latar belakang sembari Anda melakukan bagian berikutnya.

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-android-codelabs-101-starter/kotlin.

...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 101-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 komputer Anda untuk shrine) 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 library dukungan 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 menyinkronkan 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 Anda sudah memiliki perangkat Android yang 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 tidak dapat menambahkan dependensi atau menjalankan aplikasi dengan sukses, 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! Kode awal untuk halaman login Shrine akan berjalan di emulator Anda. Anda akan melihat nama "Shrine" dan logo Shrine tepat di bawahnya.

Mari kita lihat kodenya. Kami telah menyediakan framework navigasi Fragment sederhana dalam kode contoh untuk menampilkan fragmen dan menavigasi antar-fragmen.

Buka MainActivity.kt di direktori shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Akan berisi seperti ini:

Catatan: Untuk mempelajari lebih lanjut Navigasi, membuat dan mempertahankan jalur Navigasi menggunakan Android Studio, lihat latihan Kotlin Android Fundamentals 03.2: Define navigation paths

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

Aktivitas ini menampilkan file tata letak R.layout.shr_main_activity, yang ditentukan dalam shr_main_activity.xml.

Anda dapat melihat bahwa di onCreate(), MainActivity.kt memulai transaksi Fragment untuk menampilkan LoginFragment. Untuk codelab ini, kita akan mengubah LoginFragment. Aktivitas ini juga mengimplementasikan metode navigateTo(Fragment), yang ditentukan di NavigationHost, yang memungkinkan fragmen mana pun membuka fragmen lain.

Command + Klik (atau Control + Klik) shr_main_activity di file aktivitas untuk membuka file tata letak, atau buka file tata letak di app -> res -> layout -> shr_main_activity.xml.

Catatan: Jika Anda melihat pratinjau aplikasi, bukan file XML saat membuka shr_main_activity.xml, beralihlah dari tab "Design" ke tab "Text" di kiri bawah panel. Kita akan bekerja di tab "Text" selama codelab ini.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Di sini, kita melihat <FrameLayout> sederhana yang berfungsi sebagai penampung untuk fragmen apa pun yang ditampilkan aktivitas.

Selanjutnya, mari kita buka LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment meng-inflate file tata letak shr_login_fragment dan menampilkannya di onCreateView().

Sekarang, mari kita lihat file tata letak shr_login_fragment.xml untuk melihat tampilan halaman login.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Di sini, kita dapat melihat <LinearLayout> dengan <ImageView> di bagian atas, yang mewakili logo Shrine.

Setelah itu, ada tag <TextView> yang mewakili label Shrine di bawah logo. Teks untuk label ini adalah resource string bernama @string/shr_app_name. Jika Anda Command + Klik (atau Control + Klik) nama resource string, atau membuka app -> res -> values -> strings.xml, Anda dapat melihat file strings.xml tempat resource string ditentukan. Jika resource string lainnya ditambahkan di masa mendatang, resource tersebut akan ditentukan di sini. Setiap resource dalam file ini harus memiliki awalan shr_ untuk menunjukkan bahwa resource tersebut adalah bagian dari aplikasi Shrine.

Setelah Anda memahami kode awal, sekarang mari kita implementasikan komponen pertama kita.

3. Menambahkan kolom teks

Untuk memulai, kita akan menambahkan dua kolom teks ke halaman login agar orang dapat memasukkan nama pengguna dan sandi. Kita akan menggunakan komponen Kolom Teks MDC, yang mencakup fungsi bawaan yang menampilkan label mengambang dan pesan error.

Kolom teks Desain Material telah disempurnakan secara signifikan untuk memberikan lebih banyak opsi penyesuaian guna mendukung merek Anda, dengan peningkatan yang didukung oleh riset pengalaman pengguna (UX) yang menyeluruh demi kegunaan dan desain visual yang lebih baik.

Pelajari lebih lanjut kolom teks baru di artikel Pedoman Material.

Menambahkan XML

Di shr_login_fragment.xml, tambahkan dua elemen TextInputLayout dengan turunan TextInputEditText di dalam <LinearLayout>, di bawah label "SHRINE" <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Tips: Untuk membuka file dengan cepat di Android Studio, ketuk dua kali tombol Shift untuk menampilkan kolom penelusuran mengambang, lalu ketik nama file yang ingin Anda buka.

Cuplikan di atas mewakili dua kolom teks, yang masing-masing terdiri dari elemen <TextInputLayout> dan turunan <TextInputEditText>. Teks petunjuk untuk setiap kolom teks ditentukan dalam atribut android:hint.

Kami telah menyertakan dua resource string baru untuk kolom teks – @string/shr_hint_username dan @string/shr_hint_password. Buka strings.xml untuk melihat resource string ini.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Menambahkan validasi input

Komponen TextInputLayout menyediakan fungsi masukan error bawaan.

Untuk menampilkan masukan error, lakukan perubahan berikut pada shr_login_fragment.xml:

• Tetapkan atribut app:errorEnabled ke true pada elemen Password TextInputLayout. Tindakan ini akan menambahkan padding ekstra untuk pesan error di bawah kolom teks.
• Tetapkan atribut android:inputType ke "textPassword" pada elemen Password TextInputEditText. Tindakan ini akan menyembunyikan teks input di kolom sandi.

Dengan perubahan ini, kolom teks di shr_login_fragment.xml akan terlihat seperti ini:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Sekarang coba jalankan aplikasi. Anda akan melihat halaman dengan dua kolom teks untuk "Username" dan "Password"!

Lihat animasi label mengambang:

Fitur Kolom Teks MDC meliputi:

• Menampilkan masukan error bawaan
• Mendukung tombol untuk visibilitas sandi menggunakan app:passwordToggleEnabled
• Menawarkan fungsi teks bantuan bawaan menggunakan app:helperText
• Menampilkan jumlah karakter total dan maksimum menggunakan app:counterEnabled dan app:counterMaxLength

4. Menambahkan tombol

Selanjutnya, kita akan menambahkan dua tombol ke halaman login: "Cancel" dan "Next". Kita akan menggunakan komponen Tombol MDC, yang dilengkapi dengan efek ripple tinta Desain Material ikonik bawaan.

Menambahkan XML

Di shr_login_fragment.xml, tambahkan <RelativeLayout> ke <LinearLayout>, di bawah elemen TextInputLayout. Kemudian, tambahkan dua elemen <MaterialButton> ke <RelativeLayout>.

File XML yang dihasilkan akan terlihat seperti ini:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Catatan: Komponen MaterialButton memiliki gaya default tombol berwarna dan ditinggikan. Namun, untuk tombol Cancel ini, kita menginginkan tombol yang tidak ditinggikan dan tidak terisi. Untuk melakukannya, kita menerapkan atribut style: @style/Widget.MaterialComponents.Button.TextButton.

Selesai! Saat Anda menjalankan aplikasi, ripple tinta akan ditampilkan saat Anda mengetuk setiap tombol.

Fitur Tombol MDC meliputi:

• Masukan sentuh bawaan (disebut MDC Ripple) secara default
• Ketinggian default
• Radius sudut dan stroke yang dapat disesuaikan

5. Membuka Fragmen berikutnya

Terakhir, kita akan menambahkan beberapa kode Kotlin ke LoginFragment.kt untuk menghubungkan tombol "NEXT" kita agar bertransisi ke fragmen lain.

Mari kita tambahkan metode boolean pribadi isPasswordValid di LoginFragment.kt di bawah onCreateView(), dengan logika untuk menentukan apakah sandi valid atau tidak. Untuk tujuan demo ini, kita hanya akan memastikan bahwa sandi memiliki panjang minimal 8 karakter:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

Selanjutnya, tambahkan pemroses klik ke tombol "Next" yang menetapkan dan menghapus error berdasarkan metode isPasswordValid() yang baru saja kita buat. Di onCreateView(), pemroses klik ini harus ditempatkan di antara baris inflater dan baris return view.

Sekarang mari kita tambahkan pemroses tombol ke TextInputEditText sandi untuk memproses peristiwa tombol yang akan menghapus error. Pemroses ini juga harus menggunakan isPasswordValid() untuk memeriksa apakah sandi valid atau tidak. Anda dapat menambahkannya langsung di bawah pemroses klik di onCreateView().

Metode onCreateView() Anda sekarang akan terlihat seperti ini:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Catatan: Jika Android Studio mengalami error Cannot resolve symbol saat menulis kode ini, tekan Alt + Enter atau (Option + Return di Mac) untuk mengimpor simbol yang tidak ada.

Sekarang, kita dapat membuka fragmen lain. Di onCreateView(), update OnClickListener untuk membuka fragmen lain saat validasi error berhasil. Kode clickListener Anda sekarang akan terlihat sebagai berikut:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Kita telah menambahkan baris (activity as NavigationHost).navigateTo(ProductGridFragment(), false) ke kasus else pemroses klik. Baris ini memanggil metode navigateTo() dari MainActivity untuk membuka fragmen baru – ProductGridFragment. Saat ini, halaman ini kosong dan akan Anda kerjakan di MDC-102.

Parameter false di navigateTo() memberi tahu aktivitas untuk tidak menambahkan fragmen saat ini ke backstack, sehingga pengguna tidak akan dapat kembali ke layar login menggunakan tombol kembali.

Sekarang, build aplikasi. Tekan tombol Next.

Anda berhasil! Layar ini akan menjadi titik awal codelab berikutnya yang akan Anda kerjakan di MDC-102.

6. Selesai

Dengan menggunakan markup XML dasar dan ~30 baris Kotlin, library Komponen Material untuk Android telah membantu Anda membuat halaman login yang indah yang sesuai dengan pedoman Desain Material, dan juga terlihat serta berfungsi secara konsisten di seluruh perangkat.

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

Anda dapat menguji versi halaman Anda berdasarkan versi yang telah selesai dengan membuka project shrine di direktori tersebut dengan Android Studio dan menjalankan aplikasi.

Langkah berikutnya

Kolom Teks dan Tombol adalah dua komponen inti dalam library MDC Android, tetapi sebenarnya masih banyak lagi. Anda dapat mempelajari komponen lainnya di MDC Android. Atau, buka MDC 102: Tata Letak dan Struktur Desain Material untuk mempelajari panel aplikasi atas, tampilan kartu, dan tata letak petak. Terima kasih telah mencoba Komponen Material. Kami harap Anda menikmati codelab ini.

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