Florentino Benedictus: Tugas 5 - Membuat Halaman Log In

Nama : Florentino Benedictus

NRP : 5025201222

Tahun : 2024

Kelas : Pemrograman Perangkat Bergerak I

Link Implementasi : Link Github Tugas 5

Tugas 5 - Membuat Halaman Log In

Pada tugas ini, dibuat halaman log in menggunakan composable image, textfield, dan button yang berfungsi sebagai tampilan antarmuka awal dari suatu aplikasi. Tampilan antarmuka tersebut memungkinkan pengembang software untuk kemudian menambahkan implementasi database dan logika backend. Implementasi menggunakan referensi dari Studi Kasus Membuat Halaman Login:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "MyLogin" dan menggunakan level API minimum 26 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang telah dibuat sebelumnya.

2. Ubah Template Default

Hapus composable Greeting preview default yang terbuat ketika project diinisiasi, kemudian hapus juga isi setContent dari onCreate dan ganti dengan LoginScreen(). LoginScreen() merupakan fungsi utama yang akan dibuat selanjutnya.

3. Import Resource

Kemudian, import resource image icon yang diperlukan melalui View -> Tool Windows -> Resource Manager.

Jika sudah ter-import maka akan terlihat resource-resource gambar tersebut akan tersedia pada app/res/drawable.

4. Buat LoginScreen.kt

Selanjutnya, akan dibuat LoginScreen.kt pada app/java/com.example.mylogin yang akan berisi LoginScreen() yaitu fungsi composable utama yang akan dipanggil pada MainActivity.kt. Pada LoginScreen() akan ditampilkan image icon login, teks "Welcome Back", dan teks "Login to your account" dalam composable column. Sesuaikan spacing menggunakan spacer dan posisikan juga menggunakan alignment center sehingga posisi composable column tersebut terletak di tengah layar. Kemudian run aplikasi menggunakan device yang diinginkan, maka tampilannya akan terlihat seperti pada gambar.

5. Tambahkan Textfield

Selanjutnya, tambahkan textfield untuk input email dan password user menggunakan composable OutlinedTextField. Kemudian tambahkan juga spacer sesuai keperluan.

6. Tambahkan Button Login dan Forgot Password

Tambahkan button Login di bawah textfield menggunakan composable button, Forgot Password menggunakan composable text dengan modifier clickable sehingga dapat ditekan, dan tambahkan teks bagian bawah untuk login menggunakan third-party app tertentu.

7. Tambahkan Image Third-Party App

Image-image seperti Facebook, Github, dan Twitter dapat dimasukkan pada program menggunakan composable Image. Kemudian, agar gambar-gambar tersebut dapat diklik maka composable image dapat diberi modifier clickable seperti teks forgot password pada poin sebelumnya. Lokasi dapat dirapikan dengan cara memasukkan image-image tersebut pada composable Row. Hasil akhir dapat terlihat seperti gambar di atas.

8. Cek Hasil & Modifikasi

Selanjutnya, untuk memastikan bahwa tombol sudah berfungsi dengan benar maka dapat digunakan variabel email dan password yang akan menyimpan input user.

Tambahkan pada onValueChange untuk textfield email dan password sehingga variabel email dan password akan terupdate ketika user memasukkan input teks. Tambahkan juga PasswordVisualTransformation() sehingga password tidak terlihat secara plaintext.

Selanjutnya, tambahkan logging info sehingga ketika user mencoba login maupun klik forgot password, logging akan terlihat di console

Tambahkan juga logging info ketika user klik tombol untuk login melalui Facebook, Github, dan Twitter.

Untuk mengecek log, klik View -> Tool Windows -> Logcat. Maka pada bagian bawah terminal untuk output logging akan terlihat

Kemudian run ulang app, dan masukkan beberapa value pada textfield email dan password maupun klik forgot password dan third-party apps. Maka terlihat bahwa tombol-tombol tersebut sudah fungsional.

Berikut adalah isi code MainActivity.kt dan LoginScreen.kt:

MainActivity.kt

LoginScreen.kt