Membuat Aplikasi Login Page Sederhana

 Faiz haq noviandra ciptadi putra
5025211132

Tugas 7

Membuat Halaman Login

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

Berikut ini untuk full kode nya :

package com.example.mylogin

import android.os.Bundle
import androidx.compose.runtime.remember
import androidx.compose.runtime.mutableStateOf
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.RoundedCornerShape
import com.example.mylogin.ui.theme.MyloginTheme
import androidx.compose.foundation.background
import androidx.compose.ui.graphics.Brush



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyloginTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    LoginScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun LoginScreen(modifier: Modifier = Modifier) {
    val email = remember { mutableStateOf("") }
    val password = remember { mutableStateOf("") }

    Box(
        modifier = modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(Color(0xFFE0C3FC), Color(0xFF8EC5FC))
                )
            ),
        contentAlignment = Alignment.Center
    ) {
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier
                .padding(24.dp)
                .fillMaxWidth()
                .wrapContentHeight()
        ) {
            Column(
                modifier = Modifier
                    .padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Image(
                    painter = painterResource(id = R.drawable.enter),
                    contentDescription = "Login Image",
                    modifier = Modifier
                        .height(120.dp)
                        .padding(bottom = 16.dp)
                )

                Text("Welcome Back!", style = MaterialTheme.typography.headlineMedium)
                Text("Please login to continue", style = MaterialTheme.typography.bodyMedium)

                Spacer(modifier = Modifier.height(24.dp))

                OutlinedTextField(
                    value = email.value,
                    onValueChange = { email.value = it },
                    label = { Text("Email Address") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )

                Spacer(modifier = Modifier.height(12.dp))

                OutlinedTextField(
                    value = password.value,
                    onValueChange = { password.value = it },
                    label = { Text("Password") },
                    singleLine = true,
                    visualTransformation = PasswordVisualTransformation(),
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                    modifier = Modifier.fillMaxWidth()
                )

                Spacer(modifier = Modifier.height(20.dp))

                Button(
                    onClick = { /* Handle Login */ },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp),
                    shape = RoundedCornerShape(12.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color(0xFF6A1B9A)
                    )
                ) {
                    Text("Login", color = Color.White)
                }

                Spacer(modifier = Modifier.height(12.dp))

                TextButton(onClick = { /* Forgot Password */ }) {
                    Text("Forgot Password?", style = MaterialTheme.typography.bodySmall)
                }

                Spacer(modifier = Modifier.height(16.dp))

                Text("Or sign in with", fontSize = 14.sp, color = Color.Gray)

                Spacer(modifier = Modifier.height(8.dp))

                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    listOf(R.drawable.facebook, R.drawable.google, R.drawable.github).forEach { iconId ->
                        IconButton(onClick = { }) {
                            Image(
                                painter = painterResource(id = iconId),
                                contentDescription = null,
                                modifier = Modifier.size(36.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyloginTheme {
        LoginScreen()
    }
}

    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.