Tugas 7 - Membuat Aplikasi Login Page Sederhana
Membuat Aplikasi Login Page Sederhana
Ricardo Supriyanto -5025221218
Pada tugas pertemuan 7, saya diberikan penugasan untuk dapat membuat aplikasi login pagi sederhana. Referensi utama yang saya gunakan adalah menggunakan Blog materi dan video yang diberikan saat sesi perkuliahan tersebut. Disini saya mengimplementasikan antarmuka pengguna (UI) untuk halaman login pada aplikasi Android. Aktivitas utama (MainActivity) menampilkan composable LoginScreen, yang berisi semua elemen UI login. LoginScreen menampilkan komponen-komponen standar seperti:
- Logo aplikasi.
- Teks judul dan slogan.
- Dua kolom input (OutlinedTextField) untuk Email dan Password, dilengkapi dengan ikon di awal field.
- Fungsionalitas tampilkan/sembunyikan password dengan ikon toggle di akhir field password.
- Tombol utama "Login".
- Tombol teks "Forgot password?".
- Tombol ikon untuk login via Google dan Facebook.
- Teks informasi syarat dan ketentuan.
Berikut merupakan sedikit demo aplikasi:
Berikut merupakan hasil aplikasi ketika saya run menggunakan emulator:
Kode Program Modifikasi:
@Composable
fun LoginScreen() {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var passwordVisible by remember { mutableStateOf(false) }
var isLoading by remember { mutableStateOf(false) }
var showEmailError by remember { mutableStateOf(false) }
var showPasswordError by remember { mutableStateOf(false) }
val context = LocalContext.current
val keyboardController = LocalSoftwareKeyboardController.current
val isInputValid = email.isNotBlank() && password.isNotBlank()
Column(
modifier = Modifier
.fillMaxSize()
.padding(32.dp),
verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = R.drawable.applogo),
contentDescription = "App Logo",
modifier = Modifier.size(250.dp)
)
Text(
text = "Create and discover your life on Open Tofu",
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center
)
OutlinedTextField(
value = email,
onValueChange = {
email = it
showEmailError = false
},
label = { Text("Email") },
singleLine = true,
isError = showEmailError,
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = "Email Icon")
},
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
modifier = Modifier.fillMaxWidth()
)
if (showEmailError) {
Text(
text = "Email cannot be empty",
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.align(Alignment.Start)
)
}
OutlinedTextField(
value = password,
onValueChange = {
password = it
showPasswordError = false
},
label = { Text("Password") },
singleLine = true,
isError = showPasswordError,
leadingIcon = {
Icon(Icons.Default.Lock, contentDescription = "Password Icon")
},
visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
if (isInputValid) {
} else {
showEmailError = email.isBlank()
showPasswordError = password.isBlank()
Toast.makeText(context, "Email or password cannot be empty", Toast.LENGTH_SHORT).show()
}
}
),
trailingIcon = {
val image = if (passwordVisible)
Icons.Filled.Visibility else Icons.Filled.VisibilityOff
val description = if (passwordVisible) "Hide password" else "Show password"
IconButton(onClick = { passwordVisible = !passwordVisible }) {
Icon(imageVector = image, contentDescription = description)
}
},
modifier = Modifier.fillMaxWidth()
)
if (showPasswordError) {
Text(
text = "Password cannot be empty",
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.align(Alignment.Start)
)
}
TextButton(
onClick = {
Toast.makeText(context, "Forgot password clicked!", Toast.LENGTH_SHORT).show()
},
modifier = Modifier.align(Alignment.End),
colors = ButtonDefaults.textButtonColors(
contentColor = Color(0xFFE7C200)
)
) {
Text("Forgot password?")
}
Button(
onClick = {
showEmailError = email.isBlank()
showPasswordError = password.isBlank()
if (isInputValid && !isLoading) {
Toast.makeText(context, "Attempting Login...", Toast.LENGTH_SHORT).show()
isLoading = true
android.os.Handler().postDelayed({
isLoading = false
Toast.makeText(context, "Login logic placeholder finished.", Toast.LENGTH_SHORT).show()
}, 2000)
} else if (!isInputValid) {
Toast.makeText(context, "Email or password cannot be empty", Toast.LENGTH_SHORT).show()
}
},
modifier = Modifier.fillMaxWidth(),
enabled = !isLoading,
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFFE7C200),
contentColor = Color.White
)
) {
if (isLoading) {
CircularProgressIndicator(
modifier = Modifier.size(24.dp),
color = Color.White,
strokeWidth = 2.dp
)
} else {
Text("Login")
}
}
Text(
"or continue with",
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center
)
Row(
modifier = Modifier.wrapContentWidth(),
horizontalArrangement = Arrangement.spacedBy(32.dp),
verticalAlignment = Alignment.CenterVertically
) {
IconButton(
onClick = {
Toast.makeText(context, "Login with Google clicked!", Toast.LENGTH_SHORT).show()
}
) {
Image(
painter = painterResource(id = R.drawable.google_logo),
contentDescription = "Login with Google",
modifier = Modifier.size(40.dp)
)
}
IconButton(
onClick = {
Toast.makeText(context, "Login with Facebook clicked!", Toast.LENGTH_SHORT).show()
}
) {
Image(
painter = painterResource(id = R.drawable.facebook_logo),
contentDescription = "Login with Facebook",
modifier = Modifier.size(40.dp)
)
}
}
Text(
"By continuing, you agree to Open Tofu's Terms of Service and acknowledge that you've read our Privacy Policy.",
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center
)
}
}
Link Repository Github: Tugas 7 - PPB
Demo Aplikasi:
Referensi:
Komentar
Posting Komentar