Membuat Aplikasi Android "Login Screen" dengan Jetpack Compose
Blog ini menjelaskan cara membuat aplikasi sederhana berupa Login Screen menggunakan Jetpack Compose. Aplikasi ini memiliki fitur input email, password, tombol login, serta opsi login sosial media.
Source code lengkap dapat diakses di:
https://github.com/MRHP1/Mobile-Programming/tree/main/MyLogin
1. Struktur Program
- MainActivity.kt
- LoginScreen.kt
- State Management
- Reusable Component
2. MainActivity (Full Code)
package com.example.mylogin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.mylogin.ui.theme.MyLoginTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MyLoginTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
LoginScreen()
}
}
}
}
}
3. LoginScreen (Full Code)
package com.example.mylogin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
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 com.example.mylogin.ui.theme.MyLoginTheme
@Composable
fun LoginScreen() {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = R.drawable.a),
contentDescription = "Login logo",
modifier = Modifier.size(240.dp)
)
Spacer(modifier = Modifier.height(32.dp))
Text(
text = "Welcome Back",
fontSize = 28.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "Login to your account",
color = MaterialTheme.colorScheme.secondary
)
Spacer(modifier = Modifier.height(32.dp))
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email Address") },
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
singleLine = true
)
Spacer(modifier = Modifier.height(16.dp))
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
modifier = Modifier.fillMaxWidth(),
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
singleLine = true
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = { },
modifier = Modifier.fillMaxWidth()
) {
Text("Login")
}
}
}
4. Penjelasan
- State
State digunakan untuk menyimpan nilai yang berubah selama aplikasi berjalan, seperti email dan password yang diinput user. Dalam Jetpack Compose, state dibuat menggunakan remember dan mutableStateOf. remember berfungsi agar nilai tetap tersimpan selama composable masih aktif (tidak reset setiap recomposition), sedangkan mutableStateOf memungkinkan nilai tersebut berubah. Ketika nilai state berubah, Compose akan otomatis melakukan recomposition sehingga UI langsung ikut ter-update tanpa perlu manual refresh. - Column
Column adalah komponen layout yang digunakan untuk menyusun elemen UI secara vertikal (dari atas ke bawah). Semua komponen seperti gambar, teks, input field, dan tombol diletakkan di dalam Column agar tersusun rapi. Properti seperti verticalArrangement dan horizontalAlignment dapat digunakan untuk mengatur posisi konten (misalnya di tengah layar), sementara Modifier.padding memberikan jarak agar tampilan tidak terlalu mepet. - OutlinedTextField
OutlinedTextField merupakan komponen input dari Material Design yang digunakan untuk menerima input dari pengguna. Pada aplikasi ini digunakan untuk email dan password. Properti value menampung nilai input, sedangkan onValueChange akan dipanggil setiap kali user mengetik, sehingga state akan langsung diperbarui. Untuk password, biasanya ditambahkan visualTransformation agar teks disembunyikan, serta keyboardOptions untuk menyesuaikan tipe keyboard (email atau password). - Button
Button digunakan sebagai pemicu aksi, dalam hal ini proses login. Saat tombol ditekan, kode di dalam onClick akan dijalankan, misalnya untuk mengambil nilai email dan password dari state, melakukan validasi, atau mengirim data ke server/API. Button juga bisa dikustomisasi ukurannya dengan Modifier dan biasanya dibuat full width agar lebih mudah diakses oleh pengguna.
5. Cara Menjalankan
- Buka Android Studio
- Buat project Compose
- Copy code di atas
- Tambahkan gambar di drawable
- Run aplikasi
No comments:
Post a Comment