PPB C - Pertemuan 7 - Halaman Login Sederhana

5025221103 | Hilmi Fawwaz Sa'ad | Pertemuan 7 | PPB C

Halaman Login Sederhana

Pada tugas kali ini, saya membuat sebuah aplikasi halaman login sederhana menggunakan bahasa pemrograman Kotlin pada aplikasi Android Studio dengan memanfaatkan Jetpack Compose untuk membangun tampilan antarmuka pengguna. Halaman login ini dirancang untuk menampilkan tampilan awal yang terdiri dari gambar latar belakang, input email, input password, tombol login, serta opsi login menggunakan akun sosial media seperti Google dan Facebook.

Repository Github: Halaman Login Sederhana

1. Buka Android Studio

2. Pilih "Project Baru"

3. Pilih "Empty Activity" dan pilih "Next"

4. Isi konfigurasi sesuai dengan project yang dikerjakan dan pilih "Finish"

5. Konfigurasi yang dibuat akan menghasilkan file MainActivity yang berfungsi sebagai tempat utama untuk menjalankan aplikasi serta mengatur tampilan awal yang akan ditampilkan kepada pengguna

6. Hapus Composable dan sisakan MainActivity Function seperti berikut ini

7. Membuat file Kotlin baru dengan nama LoginScreen.kt pada folder app/src/main/java/com/example/simpleloginpage untuk membuat UI screen dari login page

8. Sebelum memulai, persiapkan terlebih dahulu gambar yang akan digunakan untuk kebutuhan halaman login. Gambar dapat diperoleh dari berbagai sumber penyedia aset, seperti Freepik, Google, atau platform lain yang menyediakan gambar gratis. Setelah itu, masukkan gambar tersebut ke dalam Resource Manager pada folder drawable.

9. Buat sebuah Composable function bernama LoginScreen yang digunakan untuk menampung dan menampilkan antarmuka pengguna pada halaman login

10. Pada bagian awal fungsi LoginScreen, buat dua variabel yaitu email dan password yang digunakan untuk menyimpan input dari pengguna. Kedua variabel tersebut menggunakan remember dan mutableStateOf() yang berfungsi untuk menyimpan nilai state sehingga ketika terjadi perubahan nilai, tampilan antarmuka akan otomatis diperbarui .

11. Membuat komponen Box sebagai container utama yang menampung seluruh elemen antarmuka pada halaman login. Modifier fillMaxSize() digunakan agar komponen Box memenuhi seluruh ukuran layar perangkat.

12. Di dalam komponen Box, tambah komponen Image yang berfungsi untuk menampilkan gambar latar belakang pada halaman login. Modifier fillMaxSize() digunakan agar gambar memenuhi seluruh area layar, sedangkan contentScale = ContentScale.Crop digunakan untuk memastikan gambar tetap proporsional dan menyesuaikan ukuran layar tanpa merusak rasio gambar.

13. Buat komponen Column yang berfungsi untuk mengatur elemen antarmuka secara vertikal dengan modifier fillMaxSize() agar memenuhi seluruh layar, serta verticalArrangement = Arrangement.Bottom untuk menempatkan elemen form login pada bagian bawah layar. Pengaturan ini bertujuan untuk menciptakan tampilan overlay, di mana form login muncul dari bagian bawah layar di atas background image.

14. Buat Column kedua yang berfungsi sebagai container utama untuk form login dengan modifier fillMaxWidth() untuk memenuhi lebar layar dan fillMaxHeight(0.7f) untuk mengisi sekitar 70% tinggi layar. Selain itu, digunakan background() dengan warna putih semi transparan menggunakan Color.White.copy(alpha = 0.9f) serta bentuk sudut melengkung pada bagian atas menggunakan RoundedCornerShape(topStart = 40.dp, topEnd = 40.dp). Modifier padding(32.dp) digunakan untuk memberikan jarak antara tepi container dengan elemen di dalamnya, serta horizontalAlignment = Alignment.CenterHorizontally untuk membuat elemen di dalam container berada di tengah secara horizontal.

15. Setelah container dibuat, tambah komponen Text yang berfungsi untuk menampilkan judul halaman login dengan tulisan "Sign In". Di bawah judul, ditambahkan teks kedua yang berfungsi sebagai subjudul dengan tulisan "Welcome back you've been missed!".

16. Membuat komponen OutlinedTextField yang digunakan sebagai input field untuk memasukkan alamat email. Komponen ini menggunakan variabel email sebagai value, serta onValueChange yang berfungsi untuk memperbarui nilai email setiap kali pengguna mengetik.

17. Membuat komponen OutlinedTextField kedua yang digunakan untuk menerima input kata sandi dari pengguna. Sama seperti input email, komponen ini menggunakan variabel password sebagai nilai input dan memperbarui nilainya menggunakan onValueChange. Selain itu, digunakan properti visualTransformation = PasswordVisualTransformation() yang berfungsi untuk menyembunyikan karakter password sehingga tidak dapat terlihat secara langsung saat diketik oleh pengguna.

18. Menambahkan komponen Text dengan tulisan "Forgot Password?" yang berfungsi sebagai opsi bagi pengguna yang lupa kata sandi.

19. Membuat komponen Button yang berfungsi sebagai tombol untuk melakukan proses login. Tombol ini menggunakan modifier fillMaxWidth() agar memiliki lebar penuh. Properti onClick digunakan untuk menangani aksi ketika tombol ditekan, seperti melakukan proses validasi login.

20. Di bawah tombol login, ditambahkan teks "or sign in with" yang berfungsi untuk memberikan alternatif metode login menggunakan akun sosial media.

21. Sebelum lanjut, perlu membuat Composable SocialIcon untuk menampilkan ikon login sosial. Fungsi ini menerima parameter iconRes yang berisi resource gambar ikon serta contentDescription sebagai deskripsi gambar. Di dalam fungsi tersebut digunakan komponen Box dengan ukuran 56.dp yang dibentuk menjadi lingkaran menggunakan CircleShape. Box ini juga diberikan warna latar belakang putih serta fitur clickable agar ikon dapat ditekan oleh pengguna. Di dalam Box, ditampilkan komponen Image yang berfungsi untuk menampilkan ikon sosial media sesuai dengan resource yang diberikan.

22. Setelah membuat Composable SocialIcon, melanjutkan sebelumnya dengan menggunakan komponen Row yang berfungsi untuk menampilkan ikon login sosial secara horizontal di tengah layar. Di dalam Row tersebut dipanggil fungsi SocialIcon sebanyak dua kali untuk menampilkan ikon Google dan Facebook sebagai pilihan login sosial.

23. Kembali pada bagian MainActivity. Pada bagian ini, digunakan SimpleLoginPageTheme yang berfungsi untuk menerapkan tema visual pada seluruh komponen di dalam aplikasi, seperti warna, tipografi, dan gaya tampilan lainnya. Di dalam tema tersebut, dipanggil fungsi LoginScreen() yang sebelumnya telah dibuat. Pemanggilan fungsi ini bertujuan untuk menampilkan antarmuka halaman login sebagai tampilan utama ketika aplikasi dijalankan.

24. Selain itu, dibuat juga fungsi LoginScreenPreview() yang diberi anotasi @Preview. Fungsi ini digunakan untuk menampilkan pratinjau tampilan halaman login secara langsung di Android Studio tanpa perlu menjalankan aplikasi pada perangkat atau emulator.