Halaman Login

 Membuat Halaman Login

Membuat Projek Baru

Klik New Project lalu pilih Empty Activities. Ubah nama projek sesuai keinginan Anda, saya memilih nama MyLogin. Pilih minimum SDK menjadi API 26 ("Oreo"; Android 8.0). Klik Finish.

Mengedit File MainActitivty.kt

1. Menghapus fungsi Greeting dan GreetingPreview serta menghapus MyLoginTheme. Sehingga sumber kode menjadi seperti ini
   
2. Kita ingin membuat fungsi baru, tetapi menaruhnya pada file yang berbeda. Hal ini dapat dilakukan dengan cara klik kanan pada folder package, lalu new, lalu Kotlin Class/File
   
   
3. Pilih tipe file dan beri nama LoginScreen, di sini kita akan mencoba terlebih dahulu memberikan tulisan sembarang. Ubah LoginScreen.kt dengan menambahkan elemen text dan panggil fungsi LoginScreen pada MainActivity.kt. Didapatkan hasil sesuai gambar di bawah ini:
   
4. Membuat tampilan yang menarik dengan menata setiap elemen. Ubahlah kode LoginScreen.kt menjadi seperti berikut:
5. Hasil langkah 4 masih belum dapat menerima input dari user, maka pada langkah ini kita akan menambahkannya. Hal ini dapat dilakukan dengan menambahkan variable email dan password dan merubah nilai parameter pada text field yang telah kita buat. Sumber kode LoginScreen.kt menjadi seperti berikut:

   Keterangan

   • mutableStateOf memungkinkan nilai variable untuk berubah
   • pengaturan posisi dapat dilakukan berdasarkan horizontal atau vertikal sesuai pada baris kode 39 dan 40
   • Spacer dapat digunakan untuk memberikan jarak antar elemen secara horizontal maupun vertikal
   • OutlinedTextField dapat digunakan sebagai input dengan model yang cukup menarik
   • visualTransformation = PasswordVisualTransformation() dapat digunakan untuk elemen password sehingga apa yang diketik akan disamarkan menjadi tanda bintang
   

Referensi: https://www.youtube.com/watch?v=-Kj9T1sa6zk