Tugas 7 Membuat Aplikasi Login Page Sederhana

Faiz haq noviandra ciptadi putra

5025211132

PPB-D

Tugas 7


Membuat Halaman Login

Pada pertemuan ini kami diminta untuk membuat simple login page, berikut merupakan kode yang digunakan:

    Struktur Umum

  • Komponen utama: LoginScreen ditampilkan di dalam Box.

  • Box: digunakan agar bisa menempatkan Card (form login) di tengah layar dengan latar gradient.

  • Card: digunakan untuk memberi efek melayang (elevation) pada form agar terlihat bersih dan rapi.

  • UI sudah responsif dan modern dengan Jetpack Compose.

    Background Gradient


.background(
    brush = Brush.verticalGradient(
        colors = listOf(Color(0xFFE0C3FC), Color(0xFF8EC5FC))
    )
)
  • Mengatur latar belakang layar dengan warna gradient vertikal ungu ke biru muda.

  • Menambah nuansa elegan dan modern.

  Form Login dalam Card


Card(
    elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
    shape = RoundedCornerShape(16.dp),
)
  • Card membungkus form login agar terlihat seperti kartu melayang, terpisah dari latar belakang.

  • RoundedCornerShape memperhalus sudutnya.

 Gambar Ikon Login


Image(
    painter = painterResource(id = R.drawable.enter),
    ...
)
  • Menampilkan ikon masuk (login) di atas form.

  • File gambar enter.png harus ada di res/drawable.

 Email dan Password


OutlinedTextField(...)
  • Input email dan password dengan desain border outline.

  • Password disembunyikan dengan PasswordVisualTransformation().

Tombol Login


Button(..., colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF6A1B9A)))
  • Tombol utama berwarna ungu tua.

  • Tinggi 50dp agar terasa tombol besar & tegas.

    "Forgot Password?"


TextButton(onClick = { ... }) {
    Text("Forgot Password?")
}
  • Teks tombol yang ringan, bisa diarahkan ke halaman lupa password nanti.

    Login via Sosial Media


listOf(R.drawable.facebook, R.drawable.google, R.drawable.github).forEach { iconId -> ... }
  • Tiga ikon media sosial ditampilkan sebagai tombol.

  • Jika ingin berfungsi, kamu bisa tambahkan onClick = { handleFacebookLogin() } dan seterusnya.

    Catatan Tambahan

  • Semua file gambar (enter.pngfacebook.pnggoogle.pnggithub.pngharus ada di folder res/drawable.

  • Jika tidak ada, akan muncul error Unresolved reference: facebook, dll.

  • Gunakan format .png dan nama file huruf kecil tanpa spasi.

     Preview

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyloginTheme {
        LoginScreen()
    }
}
  • Untuk menampilkan preview di Android Studio tanpa menjalankan emulator.



Komentar

Postingan populer dari blog ini

Tugas Pertemuan 4 PPB - Membuat aplikasi Dice Roller interaktif

Tugas Pertemuan 5 PPB - Membuat Aplikasi Kalkulator dengan menggunakan Kotlin(BMI Kalkulator)

Tugas 11 Membuat Autentikasi Aplikasi