Tugas 4 PPB B - Membuat Halaman Login

 Membuat Halaman Login

Nama    : Muhamad Ridho Pratama

NRP      : 5025201186

Kelas     : Pemrograman Perangkat Bergerak B

 

1. Buat Project
   

   
   

2. Hapus Template Hello World
   

   
   

3. Buat file Kotlin baru
   

   Agar organisasi struktur file lebih rapi

   
   

   Isi file tersebut seperti berikut

   

   Panggil fungsi LoginScreen() di file MainActivity.kt

   

4. Import gambar yang ingin digunakan di halaman depan
   

   

5. Buatlah susunan Column

   Panggil gambar yang diimpor dan berikan text "Welcome Back" di bawahnya.

   

6. Berikan modifier pada column, yaitu fillMaxSize(), verticalArrangement, dan horizontalAlignment

   

7. Berikan modifier pada gambar yang diimpor tadi, untuk mengubah size-nya.

   

8. Ubah ketebalan dari teks "Welcome Back"

   

9. Berikan Spacer setinggi 4.dp, lalu teks "Login to your account", di bawah teks "Welcome Back"

   

10. Berikan Spacer setinggi 16.dp, lalu sebuah text field dengan tipe OutlinedTextField(), dan beri label "Email address"

    

11. Lakukan hal yang sama, tetapi label diganti menjadi "Password"

    

12. Berikan Spacer setinggi 16.dp, lalu buat Button dengan text "Login"

    

13. Berikan Spacer setinggi 32.dp, lalu buat text "Forgot Password?" dengan modifier Modifier.clickable

    

14. Berikan Spacer setinggi 32.dp, lalu buat text "Or sign in with", dan beri spacer setinggi 8.dp

15. Buat susunan Row, dengan modifier Modifier.fillMaxWidth().padding(40.dp) dan horizontalArrangement = Arrangement.SpaceEvenly

    

16. Pada Row yang dibuat sebelumnya, tambahkan 3 Image(), yaitu logo Google, Facebook, dan Twitter/X

    Berikan modifier Modifier.size(60.dp).clickable { }

17. Menyimpan value di variabel

    Agar value di text field Email dan Password bisa ditik dan disimpan, kita perlu membuat variabel email dan password untuk menyimpannya.

    

18. Tambahkan parameter ke kedua OutlinedTextField() yang dibuat tadi