Membuat Halaman Simple Login

Nama : Rafaela Shyra Ashma' Ramadhani

NRP : 5025231217

Kelas : Pemrograman Perangkat Bergerak - B

Tugas Halaman Login

Dalam pengembangan aplikasi Android modern, tampilan antarmuka menjadi salah satu aspek penting yang menentukan pengalaman pengguna. Salah satu fitur dasar yang hampir selalu ada dalam aplikasi adalah halaman login. Pada tugas ini, saya membuat halaman login sederhana menggunakan Jetpack Compose di Android Studio. Compose merupakan toolkit UI modern dari Android yang memungkinkan pembuatan tampilan secara deklaratif, sehingga kode menjadi lebih ringkas dan mudah dipahami. Pada implementasi ini, saya menggunakan dua file utama, yaitu MainActivity.kt sebagai entry point aplikasi, dan LoginScreen.kt yang berisi desain serta komponen halaman login.

Kodenya: GitHub 

Dalam pengerjaan tugas ini, langkah pertama adalah membuat project baru dengan Empty Activity, kemudian menghapus greeting preview bawaan. Setelah itu, dibuat composable LoginScreen yang berisi komponen UI seperti image, textfield, dan button, serta menambahkan aset gambar ke dalam folder drawable.

Pada file MainActivity.kt, class MainActivity berfungsi sebagai titik awal ketika aplikasi dijalankan. Di dalam method onCreate, digunakan fungsi setContent untuk menampilkan UI berbasis Compose. Tema aplikasi dibungkus menggunakan MyLoginTheme, kemudian ditambahkan komponen Surface sebagai container utama dengan warna background dari MaterialTheme. Di dalam Surface inilah dipanggil fungsi LoginScreen(), yang berarti seluruh tampilan login akan dirender dari composable tersebut.

Sementara itu, pada file LoginScreen.kt, dibuat sebuah fungsi composable bernama LoginScreen yang bertanggung jawab menampilkan seluruh elemen UI halaman login. Di awal, terdapat dua state yaitu email dan password yang disimpan menggunakan remember dan mutableStateOf. State ini berfungsi untuk menyimpan input dari user secara dinamis.

Struktur utama layout menggunakan Column, yang menyusun elemen secara vertikal di tengah layar dengan bantuan properti verticalArrangement dan horizontalAlignment. Di bagian atas ditampilkan gambar menggunakan komponen Image, yang diambil dari resource drawable. Setelah itu terdapat teks “Welcome Back” dengan ukuran besar dan tebal sebagai judul, serta teks tambahan sebagai deskripsi.

Selanjutnya, terdapat dua input field menggunakan OutlinedTextField, masing-masing untuk email dan password. Input password menggunakan PasswordVisualTransformation agar karakter yang dimasukkan tidak terlihat secara langsung. Setiap field diatur agar memenuhi lebar layar dengan Modifier.fillMaxWidth(). Di bawah input field, terdapat tombol Button dengan teks “Login” yang saat ini belum memiliki aksi (masih kosong pada onClick). Kemudian ditambahkan teks “Forgot Password?” yang bisa diklik menggunakan modifier clickable, meskipun belum diimplementasikan fungsinya.

Bagian terakhir dari halaman ini adalah opsi login alternatif melalui media sosial. Ditampilkan teks “Or sign in with”, lalu diikuti dengan tiga icon (Facebook, Google, dan Github) yang disusun secara horizontal menggunakan Row. Masing-masing icon menggunakan Image dan dapat diklik, meskipun aksi kliknya juga masih belum diatur. Secara keseluruhan, kode ini menunjukkan bagaimana membuat tampilan login yang sederhana namun cukup lengkap menggunakan Jetpack Compose, dengan memanfaatkan layout dasar seperti Column dan Row, serta komponen UI seperti Text, Image, OutlinedTextField, dan Button.

Hasilnya: