Nama : Naily Khairiya
NRP : 5025201244
Kelas : PPB-I
Dalam tugas ini, kita akan menjelajahi proses pembuatan halaman login sederhana menggunakan Kotlin. Meskipun Kotlin biasanya digunakan untuk pengembangan aplikasi Android. Mari kita mulai dengan langkah-langkah dasar untuk membuat halaman login menggunakan Kotlin.
Desain yang akan dibuat adalah seperti ini,
Hasil dari tugas ini sebagai berikut,
Untuk menghasilkan hasil demikian, mula-mula buat project baru
Buat file baru LoginScreen.kt dengan isi sebagai berikut,
Dalam contoh kode ini, kita menggunakan Jetpack Compose untuk membuat layar login yang responsif dalam aplikasi Android. Fungsi LoginScreen yang diimplementasikan sebagai @Composable function menampilkan UI dengan berbagai elemen seperti gambar logo, teks sambutan, dan input fields untuk email dan password. Kita menggunakan remember dan mutableStateOf untuk mengelola state dari email dan password agar dapat diubah dan disinkronkan dengan UI. Ketika pengguna menekan tombol login, informasi email dan password dicatat menggunakan Log. Selain itu, terdapat opsi untuk lupa password dan tautan untuk masuk menggunakan akun media sosial seperti Facebook, Google, dan GitHub. Ini adalah contoh penggunaan Jetpack Compose untuk membuat UI yang interaktif dan menarik bagi pengguna aplikasi Android.
Dalam file MainActivity.kt, kita mendefinisikan kelas MainActivity yang merupakan turunan dari ComponentActivity. Pada metode onCreate(), kita memanggil metode setContent() untuk menentukan tata letak UI utama aplikasi. Kita menggunakan MyLoginTheme untuk menerapkan tema aplikasi yang telah ditentukan. Di dalam Surface, yang mengisi seluruh ruang yang tersedia dengan warna putih (Color.White), kita memanggil LoginScreen(), yang merupakan komponen komposabel yang bertanggung jawab untuk menampilkan tata letak halaman login.
Di sisi lain, kita juga memiliki fungsi komposabel GreetingPreview yang digunakan untuk menampilkan preview UI saat merancang tata letak dengan menggunakan Preview annotation. Preview ini membantu pengembang melihat tampilan UI dalam waktu nyata saat merancang tanpa perlu mengeksekusi aplikasi secara penuh di emulator atau perangkat fisik.
Tidak ada komentar:
Posting Komentar