Tugas 5: Membuat Halaman Login menggunakan Jetpack Compose
Selamat berjumpa kembali kawan!! Di tugas ke-5 kali ini, kita akan mempelajari studi kasus mengenai pembuatan halaman login sederhana dengan jetpack compose. Fokus utama dari studi kasus ini adalah di pembuatan halaman saja, belum masuk ke fungsionalitasnya.
 |
| Halaman Login dengan Jetpack Compose |
Tutorial Pembuatan Halaman Login
📌 Membuat Project Baru
Pertama, buka Android Studio kalian dan buatlah project baru dengan template empty activity. Beri nama aplikasi yang akan dibuat sesuai keinginan kalian. Buatlah yang mudah dan sesuai dengan aplikasi yang akan dibangun, misalnya disini saya menetapkan nama aplikasinya adalah MyLoginApp.
 |
| New Project - Empty Activity |
 |
| Beri nama aplikasi yang akan dibangun |
📌 Buat File LoginScreen.kt
Setelah buat project, tunggu beberapa saat hingga gradle build selesai diproses. Selanjutnya hapus fungsi Greeting pada MainActivity.kt karena kita akan membuat fungsi tersendiri untuk membuat halaman login pada LoginScreen.kt.
Untuk membuat file LoginScreen.kt, arahkan kursor pada package di dalam folder kotlin + java. Pilih "New" kemudian klik "Kotlin Class File". Beri nama file dengan LoginScreen.kt.
Tadaa... LoginScreen.kt telah berhasil dibuat. Tuliskan fungsi LoginScreen() dan tambahkan @Composable di bagian atasnya. Hal itu agar fungsi kita mendukung penggunaan komponen-komponen jetpack compose. Untuk mencoba apakah fungsi berjalan dengan baik, buatlah komponen Text di dalam fungsi tersebut, dan panggil fungsinya di MainActivity.kt.
 | ||
Pembuatan fungsi LoginScreen()
|
📌 Import Gambar Pendukung di Halaman Login
Agar halaman lebih menarik, perlu ditambahkan beberapa gambar pendukung yang menunjukkan bahawa ini merupakan halaman login dan juga gambar media sosial sebagai alternatif login selain dari input pengguna di field email dan password. Untuk mengimpor gambar yang telah didapatkan dari internet, kita bisa lakukan dengan cara drag and drop pada folder drawable. Dengan cara seperti itu, lebih praktis dan efektif dibandingkan cara manual (memilih file dari direktori).
Berikut ini adalah contoh isi drawable aplikasi login yang sudah saya kerjakan.
 |
| Import gambar pendukung halaman login di drawable |
📌 Pembuatan Halaman Login dengan Komponen Compose
1️⃣ Buat variabel untuk menampung nilai email dan password dengan remember dan MutableStateOf.
Remember adalah sebuah utilitas dalam Jetpack Compose yang memungkinkan kita untuk mempertahankan status di seluruh rekomposisi fungsi Composable. Dengan menggunakan Remember, kita dapat melacak status yang dapat berubah dalam fungsi Composable tanpa perlu mengelolanya secara manual.
Fungsionalitas Remember mirip dengan mutableStateOf, yang digunakan untuk menyimpan status yang dapat diubah. Namun, Remember juga memastikan bahwa status tersebut dipertahankan di seluruh rekomposisi fungsi Composable. Ketika fungsi Composable direkomposisi, Remember akan mengembalikan status yang diingat sebelumnya, sehingga status tersebut akan dipertahankan dan tidak diatur ulang ke nilai awalnya.
 |
| Buat Variabel email dan password dengan Remember |
2️⃣ Buat Column dan tambahkan modifier untuk membuat konten berada tepat di tengah layar
Column merupakan bagian penyusun layout halaman login. Column digunakan untuk menyusun elemen UI secara vertikal, satu di bawah yang lain. Agar konten dari halaman login berada tepat di tengah layar, tambahkan beberapa modifier yang tersedia untuk komponen Column.
 |
| Column dan modifier nya |
Modifier fillMaxSize = Pengubah ini membuat composable mengambil semua ruang yang tersedia baik dalam lebar maupun tinggi.
horizontalAlignment = Mengatur cara posisi elemen-elemen secara horizontal di dalam container. Dalam contoh tersebut, Alignment.CenterHorizontally digunakan untuk mengatur agar elemen-elemen berada di tengah secara horizontal di dalam container.
verticalArrangement = Mengatur cara posisi elemen-elemen secara vertikal di dalam container. Dalam contoh tersebut, Arrangement.Center digunakan untuk mengatur agar elemen-elemen berada di tengah secara vertikal di dalam container.
4️⃣ Komponen composable penyusun halaman login
Pertama, ada penggunaan Image dalam Jetpack Compose untuk menampilkan gambar login dengan ukuran 200 dp dan memberikan teks deskripsi "Login Image" untuk aksesibilitas.
- painter: Parameter ini digunakan untuk menentukan sumber gambar yang akan ditampilkan. Dalam contoh tersebut, painterResource(id = R.drawable.loginimage) digunakan untuk mendapatkan gambar dari sumber daya drawable dengan ID loginimage.
- contentDescription: Ini adalah teks deskripsi yang diberikan kepada gambar. Biasanya, ini digunakan untuk memberikan deskripsi yang menjelaskan konten atau makna dari gambar untuk aksesibilitas. Dalam contoh tersebut, teks deskripsi "Login Image" digunakan.
- modifier: Parameter ini digunakan untuk memberikan modifikasi pada tampilan gambar. Dalam contoh tersebut, Modifier.size(200.dp) digunakan untuk menetapkan ukuran gambar sebesar 200 dp (density-independent pixels).
Selanjutnya ada penggunaan komponen Text untuk menampilkan teks bertuliskan "Welcome Back" berukuran 20 sp (scale-independent pixels) dan dengan style tebal. Teks berikutnya bertuliskan "Login to your account".
Di antara teks, digunakan komponen Spacer yaitu komponen yang digunakan untuk menambahkan ruang kosong di antara elemen-elemen UI dalam suatu tata letak (layout). Modifier.height(4.dp) akan menambahkan ruang kosong vertikal sebesar 4 dp di antara elemen-elemen UI dalam suatu tata letak
 |
| Penggunaan Image untuk gambar login dan teks pendukung |
Berikutnya ada komponen OutlineTextField, yaitu komponen UI yang memungkinkan pengguna untuk memasukkan teks dalam field.
 |
| Penggunaan OutlineTextField |
- Value sebagai parameter diisi dengan variabel email, yang berarti nilai yang dimasukkan ke dalam field akan disimpan dalam variabel tersebut.
- onValueChange adalah callback yang akan dipanggil setiap kali nilai dalam field berubah, di mana nilai tersebut akan diperbarui ke dalam variabel email.
- Label adalah teks label yang akan ditampilkan di luar field, dalam hal ini "Email Address".
- Value sebagai parameter diisi dengan variabel password, yang berarti nilai yang dimasukkan ke dalam field akan disimpan dalam variabel tersebut.
- onValueChange adalah callback yang akan dipanggil setiap kali nilai dalam field berubah, di mana nilai tersebut akan diperbarui ke dalam variabel password.
- Label adalah teks label yang akan ditampilkan di luar field, dalam hal ini "Password".
- visualTransformation digunakan untuk mengubah tampilan teks yang dimasukkan ke dalam field menjadi karakter yang disembunyikan, sehingga password tidak terlihat secara langsung saat dimasukkan.
 |
| Penggunaan Komponen Button |
Terakhir, ada penggunaan komponen Row untuk menampilkan 3 gambar secara horizontal.
 |
| Penggunaan Row |
- modifier: Menentukan modifikasi pada tampilan Row. Dalam kasus ini, fillMaxWidth() digunakan untuk mengisi lebar maksimal dari parent container, sedangkan padding(40.dp) digunakan untuk memberikan jarak sebesar 40 dp dari sisi kanan dan kiri.
- horizontalArrangement: Menentukan cara elemen-elemen akan disusun secara horizontal. Arrangement.SpaceEvenly digunakan untuk menyebarkan ruang secara merata antara elemen-elemen.
- Setiap Image menampilkan gambar dengan menggunakan painterResource dengan ID gambar yang sesuai. contentDescription memberikan deskripsi konten gambar untuk aksesibilitas. Modifier pada setiap gambar digunakan untuk menentukan ukuran gambar sebesar 40 dp dan menambahkan fungsi klik menggunakan clickable.
Komentar
Posting Komentar