Tugas 7 - Membuat UI Login Page Sederhana

 Moch. Avin (5025221061)

Pemrograman Perangkat Bergerak - PPB G

Link Repo Github: https://github.com/mochavin/ppb-login-page

MainActivity.kt

package com.example.loginpage

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.loginpage.ui.theme.LoginPageTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginPageTheme {
                    LoginScreen()
            }
        }
    }
}

LoginScreen.kt

package com.example.loginpage

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
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.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun LoginScreen() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5)),
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Header
            Image(
                painter = painterResource(id = R.drawable.a),
                contentDescription = "Login Image",
                modifier = Modifier.size(160.dp)
            )

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

            Text(
                text = "Welcome Back!",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
            )

            Text(
                text = "Login to your account",
                color = Color(0xFF666666),
                modifier = Modifier.padding(top = 4.dp)
            )

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

            Column(
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                OutlinedTextField(
                    value = email,
                    onValueChange = { email = it },
                    label = { Text("Email") },
                    modifier = Modifier.fillMaxWidth(),
                )

                OutlinedTextField(
                    value = password,
                    onValueChange = { password = it },
                    visualTransformation = PasswordVisualTransformation(),
                    label = { Text("Password") },
                    modifier = Modifier.fillMaxWidth(),
                )

                Button(
                    onClick = {

                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp),
                ) {
                    Text("Login", fontSize = 16.sp)
                }
            }

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

            Text(
                text = "Forgot Password?",
                modifier = Modifier.clickable {

                },
                fontWeight = FontWeight.Medium
            )

            Spacer(modifier = Modifier.height(32.dp))
            Text(
                text = "or sign in with",
                fontSize = 16.sp
            )

            Spacer(modifier = Modifier.height(24.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                SocialIcon(R.drawable.fb, "Facebook")
                SocialIcon(R.drawable.google, "Google")
                SocialIcon(R.drawable.twitter, "Twitter")
            }

            Spacer(modifier = Modifier.height(32.dp))
            InfoDisplay()
        }
    }
}

@Composable
private fun SocialIcon(iconRes: Int, description: String) {
    Image(
        painter = painterResource(id = iconRes),
        contentDescription = description,
        modifier = Modifier.size(48.dp)
    )
}

@Composable
fun InfoDisplay() {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Moch. Avin",
            fontSize = 20.sp,
            fontStyle = FontStyle.Italic,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
        )
        Text(
            text = "NRP: 5025221061",
            fontSize = 20.sp,
            fontStyle = FontStyle.Italic,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
        )
    }
}

Manajemen State

Menggunakan dua properti var (email dan password) dengan remember { mutableStateOf("") } untuk menyimpan nilai input.

Struktur Layout

Box mengisi seluruh layar dengan latar belakang abu‑abu muda, menempatkan konten di tengah.

Di dalamnya, Column (padding 24 dp, fullwidth) menyusun elemen secara vertikal dan terpusat secara horizontal.

Bagian Header

Menampilkan gambar berukuran 160 dp dari R.drawable.a.

Dua elemen Text:

“Welcome Back!” (24 sp, tebal)

“Login to your account” (abu‑abu, padding atas 4 dp)

Form Kredensial

Column berisi:

OutlinedTextField untuk Email (terikat ke email)

OutlinedTextField untuk Password (dengan PasswordVisualTransformation)

Button lebar penuh, tinggi 50 dp, berlabel “Login” 

Aksi Tambahan

Teks “Forgot Password?” dibuat dapat diklik.

Teks pemisah “or sign in with” sebelum opsi sosial login.

Baris Login Sosial

Row dengan Arrangement.SpaceEvenly menampilkan tiga ikon (Facebook, Google, Twitter) berukuran 48 dp melalui composable SocialIcon.