Membuat Halaman Login 🚀

 Furstin Aprilavia Putri - 5025221234 - PPB D

Membuat halaman login sederhana dengan Jetpaack Compose 🚀

1. Pendahuluan 

Pada tugas ke-7 ini, saya membuat implementasi sederhana dari halaman login menggunakan Jetpack Compose, dilengkapi dengan desain pastel dan fitur login.

2. Kode

Kode lengkap dapat dilihat di GitHub : https://github.com/furstinvia/ppb-d-7-loginpage.git

Kode ini menjalankan UI berbasis Compose dengan tema Material 3 dan menampilkan komponen LoginScreen() sebagai tampilan utama aplikasi.

1. UI Utama: LoginScreen()

Latar dan Layout

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0xFFFFF3F0)) // pastel pink
        .padding(24.dp),
    horizontalAlignment = Alignment.CenterHorizontally
)

Menggunakan Column untuk menyusun elemen secara vertikal.

Ilustrasi Gambar di Atas Form

Image(

    painter = painterResource(id = R.drawable.login),

    contentDescription = "Top Image",

    modifier = Modifier

        .fillMaxWidth()

        .height(180.dp) 

)

Gambar header diperbesar menjadi 180dp untuk memberikan kesan lebih dominan dan menarik di bagian atas layar.

Teks Sambutan

Text(

    text = "Welcome Back, Furstin! 🚀",

    fontSize = 24.sp,

    color = Color(0xFF444444)

)

Teks ini diposisikan tepat di bawah ilustrasi.

Input Email dan Password

OutlinedTextField(

    value = email,

    onValueChange = { email = it },

    label = { Text("Email") },

    modifier = Modifier.fillMaxWidth()

)

Field input dibuat dengan OutlinedTextField agar tampilan tetap clean dan ringan. Password disembunyikan menggunakan PasswordVisualTransformation().

Tombol Login

Button(

    onClick = { /* login action */ },

    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFB8A9C9)),

    modifier = Modifier.fillMaxWidth()

) {

    Text("Login", color = Color.White)

}

Tombol login menggunakan warna pastel ungu agar menyatu dengan tema aplikasi, dengan teks putih untuk kontras

Opsi Login Alternatif

Row(

    horizontalArrangement = Arrangement.SpaceEvenly,

    modifier = Modifier.fillMaxWidth()

) {

    listOf(

        R.drawable.google,

        R.drawable.facebook,

        R.drawable.apple

    ).forEach {

        Image(

            painter = painterResource(id = it),

            contentDescription = "Logo",

            modifier = Modifier.size(40.dp)

        )

    }

}

Tiga logo platform populer (Google, Facebook, Apple) ditampilkan sebagai alternatif metode login. Ini penting untuk kemudahan akses pengguna.

3. Video Presentasi

atau klik disini