Membuat Aplikasi Login Sederhana

Membuat Aplikasi Login Page Sederhana dengan Jetpack Compose

Dalam tutorial ini, kita akan membuat aplikasi Login Page sederhana menggunakan Jetpack Compose. Aplikasi ini memungkinkan pengguna untuk memasukkan username dan password, lalu menampilkan notifikasi apakah login berhasil atau gagal.

✨ Fitur Utama

• Input field untuk username dan password
• Password field dilengkapi masking
• Tombol Login
• Validasi sederhana dan notifikasi login

📦 Dependencies

Pastikan project Anda menggunakan Material 3. Tambahkan ini ke file build.gradle (Module):

implementation "androidx.compose.material3:material3:1.1.2"

📝 Kode Lengkap MainActivity.kt

package com.example.loginpage

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import com.example.loginpage.ui.theme.LoginPageTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginPageTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LoginScreen()
                }
            }
        }
    }
}

@Composable
fun LoginScreen() {
    val context = LocalContext.current

    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(32.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Login", style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            modifier = Modifier.fillMaxWidth()
        )

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

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

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

        Button(
            onClick = {
                if (username == "admin" && password == "admin") {
                    Toast.makeText(context, "Login Berhasil!", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(context, "Username atau Password salah", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Login")
        }
    }
}

🔍 Penjelasan Kode

• OutlinedTextField: digunakan untuk membuat input field username dan password.
• PasswordVisualTransformation: menyembunyikan inputan password agar tidak terlihat.
• Toast: digunakan untuk menampilkan notifikasi sederhana.
• remember: menyimpan state input pada komponen Compose.

✅ Preview (Opsional)

Tambahkan preview jika ingin menampilkan tampilan di Android Studio:

@Preview(showBackground = true)
@Composable
fun LoginPreview() {
    LoginPageTheme {
        LoginScreen()
    }
}

📌 Kesimpulan

Aplikasi ini adalah contoh dasar untuk membuat halaman login menggunakan Jetpack Compose. Anda bisa mengembangkannya lebih lanjut dengan menambahkan validasi lanjutan, menyambungkannya ke database atau Firebase Auth, serta mempercantik UI dengan gambar/logo.

Github : https://github.com/Arkandrvesh/PPB

Vidio :