Tugas 7 Login Page

    

Aplikasi Login Page

Vito Febrian Ananta

5025211224
Pemrograman Perangkat Bergerak (D)

Kode: (Github Repository)

Pada tugas ke-7 ini, telah dibuat aplikasi yang menampilan halaman login page. Untuk mengembangkan kemampuan secara teknis dan kreatifitas, saya memutuskan untuk mengembangkan aplikasi ini dengan menambah beberapa poin berikut:
1. Menghandle hanya angka value pada password phone number

2. Menambahkan fitur visibility pada password field

3. Menambahkan tampilan dengan social media login

Berikut adalah penjelasan detail dari kodenya:

1. Welcome Text

Cuplikan kode ini menggunakan composable Text untuk menampilkan pesan selamat datang. Ini mengatur konten teks, ukuran font, ketebalan font (bold), tinggi baris, dan menerapkan padding di akhir teks untuk tujuan tata letak.

2. Phone Field

Bagian ini mendefinisikan OutlinedTextField untuk pengguna memasukkan nomor telepon mereka. Ini mencakup variabel state value untuk menampung teks yang dimasukkan, lambda onValueChange untuk memperbarui state (dengan filter hanya menerima digit), teks placeholder dan label, modifier untuk tata letak, bentuk, dan opsi keyboard yang diatur ke KeyboardType.Phone untuk pengalaman input pengguna yang lebih baik. Warna kustom juga diterapkan pada batas.

3. Password Field

Ini adalah OutlinedTextField untuk kata sandi. Fitur utama meliputi: menggunakan variabel state passwordVisible untuk beralih antara menampilkan teks biasa (VisualTransformation.None) dan menyembunyikannya (PasswordVisualTransformation). Ini juga mencakup trailingIcon yang merupakan IconButton. Mengklik ikon ini akan mengalihkan state passwordVisible, mengubah ikon antara Visibility dan VisibilityOff untuk menunjukkan apakah kata sandi ditampilkan atau disembunyikan.

4. Text Button - Lupa Kata Sandi

Composable TextButton ini digunakan untuk tautan "Forgot Password". Ini adalah tombol sederhana dengan teks yang memicu lambda onForgotPasswordClick saat diklik. Warna dan ukuran teks disesuaikan, dan tombol sejajar ke awal containernya.

5. Login Button

Kode ini mendefinisikan tombol utama "Login". Ini adalah composable Button standar yang menjalankan lambda onLoginClick saat ditekan. Ini ditata untuk mengisi lebar, memiliki tinggi tertentu, menggunakan bentuk sudut membulat, dan warna latar belakangnya diatur ke LightBlue. Teks di dalam tombol juga ditata dengan ukuran font dan ketebalan bold tertentu.

6. Socials Button

Cuplikan pertama menunjukkan tata letak Row yang berisi beberapa composable SocialLoginButton, disusun dengan jarak yang merata di seluruh lebar. Cuplikan kedua adalah definisi composable SocialLoginButton itu sendiri. Ini adalah Box yang dapat diklik yang menampilkan sumber daya gambar (seperti ikon Facebook, Google, atau Apple) di tengah, ditujukan untuk memulai login melalui media sosial. Ini mengambil ID sumber daya ikon dan deskripsi konten sebagai parameter.

Video Presentasi:

Tampilan Android Studio:

Tampilan Aplikasi: