MDC-101 Android: Dasar-Dasar Komponen Material (MDC) (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

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. Codelab 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 "Batal" dan satu untuk "Berikutnya"
• Nama aplikasi (Shrine)
• Gambar logo Shrine

Codelab terkait dapat ditemukan di:

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

Di akhir MDC 104, Anda akan membuat 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 menyesuaikannya di MDC 103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis.

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

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 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! 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 contoh kode kami untuk menampilkan fragmen dan berpindah 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 Dasar-Dasar Android Kotlin 03.2: Menentukan jalur navigasi

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 memodifikasi LoginFragment. Aktivitas ini juga menerapkan metode navigateTo(Fragment), yang ditentukan dalam NavigationHost, yang memungkinkan fragmen mana pun menavigasi ke 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 bertindak sebagai penampung untuk fragmen apa pun yang ditampilkan aktivitas.

Selanjutnya, 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 merepresentasikan logo Shrine.

Setelah itu, ada tag <TextView> yang merepresentasikan label Shrine di bawah logo. Teks untuk label ini adalah string resource 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 ada resource string lainnya yang ditambahkan pada 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.

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

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

Pelajari lebih lanjut kolom teks baru di artikel Pedoman Material.

Tambahkan 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 memunculkan kotak penelusuran mengambang, lalu ketik nama file yang ingin Anda buka.

Cuplikan di atas menampilkan 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 bawaan untuk memberikan masukan error.

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 "Nama Pengguna" dan "Sandi".

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

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

Tambahkan XML

Dalam 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 berupa tombol berwarna yang ditinggikan. Namun, untuk tombol Batal ini, kita menginginkan tombol tanpa elevasi dan tanpa isi. Untuk melakukannya, kita menerapkan atribut style: @style/Widget.MaterialComponents.Button.TextButton.

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

Fitur Tombol MDC meliputi:

• Masukan sentuhan bawaan (disebut MDC Ripple) secara default
• Ketinggian default
• Radius dan ketebalan garis tepi sudut yang dapat disesuaikan

Terakhir, kita akan menambahkan beberapa kode Kotlin ke LoginFragment.kt untuk menghubungkan tombol "BERIKUTNYA" 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 panjang sandi minimal 8 karakter:

LoginFragment.kt

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

Selanjutnya, tambahkan pemroses klik ke tombol "Berikutnya" 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, 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 menambahkan ini 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(), perbarui OnClickListener untuk membuka fragmen lain saat validasi error berhasil. Kode clickListener Anda sekarang akan terlihat seperti 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 adalah halaman kosong yang akan Anda kerjakan di MDC-102.

Parameter false dalam 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, bangun aplikasi. Lanjutkan dan tekan tombol Berikutnya.

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

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

Aplikasi MDC 101 yang sudah 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 menggunakan 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 menjelajahi 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