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.png, facebook.png, google.png, github.png) harus 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.

Link github