Tugas 7

 

  Nama  :Danar Sodik Priyambodo

  Kelas  : 5025211145

Halaman Login Sederhana dengan Jetpack Compose

Pada pertemuan ini, kami diminta untuk membuat halaman login sederhana. Berikut adalah tampilan dan potongan kode yang digunakan:

Berikut adalah potongan kode utamanya:

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 Halaman

• LoginScreen sebagai komponen utama ditampilkan dalam Box.
• Box dipakai untuk menempatkan Card (form login) di tengah dengan latar gradasi warna.
• Card memberikan efek bayangan agar tampil lebih rapi.
• Desain mengikuti pendekatan modern menggunakan Jetpack Compose.

---

Background Gradient

• Latar belakang dibuat dengan gradasi vertikal dari ungu ke biru muda menggunakan Brush.verticalGradient.
• Memberi tampilan yang lebih estetis dan modern.

---

Form dalam Kartu (Card)

• Card membungkus form agar terlihat seperti komponen terpisah dengan sudut yang membulat.

---

Gambar Ilustrasi Login

• Ilustrasi login ditampilkan di atas form menggunakan Image.
• Pastikan gambar enter.png ada di folder res/drawable.

---

Input Email & Password

• Menggunakan OutlinedTextField untuk input email dan password.
• Password disembunyikan menggunakan PasswordVisualTransformation.

---

Tombol Login

• Tombol utama berwarna ungu tua, dibuat dengan tinggi 50dp dan sudut membulat.

---

Forgot Password

• Tombol teks ringan untuk mengakses fitur lupa password (dapat dikembangkan nanti).

---

Login via Sosial Media

• Ikon login menggunakan facebook, google, dan github.
• Dapat ditambahkan fungsi onClick untuk autentikasi sosial media jika diinginkan.

---

Catatan Tambahan

• Pastikan semua gambar seperti enter.png, facebook.png, google.png, dan github.png tersedia di folder res/drawable.
• Gunakan nama file lowercase dan tanpa spasi.
• Jika file gambar tidak ada, akan muncul error seperti Unresolved reference.

---

Preview di Android Studio

• Dekorator @Preview memungkinkan tampilan UI ditinjau langsung tanpa harus menjalankan emulator.

Source Code : https://github.com/Danar1111/Login-Page-Kotlin.git