Studi Kasus - Membuat Halaman Login
Pada pertemuan minggu ke-5 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, saya mengerjakan studi kasus membuat halaman login sederhana. Pada halaman ini terdapat beberapa composable yang digunakan, seperti Image, Text, OutlinedTextField, dan Button.
Langkah pertama adalah membuat proyek menggunakan activity kosong. Setelah membuat proyek, langkah selanjutnya adalah mengisi kolom Name dengan MyLogin, memilih level API minimum 26 (Oreo) di kolom Minimum SDK, dan kemudian mengklik tombol Finish. Selanjutnya, melakukan import Resource Drawable yang terdiri dari gambar login dan 3 gambar logo media sosial (Facebook, Google, dan X).
Langkah berikutnya adalah membuat file LoginScreen.kt untuk menuliskan kode composable terkait halaman login seperti dibawah ini:
| package com.ariefbadrussholeh.mylogin | |
| import android.util.Log | |
| import androidx.compose.foundation.Image | |
| import androidx.compose.foundation.clickable | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.foundation.layout.size | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.OutlinedTextField | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| 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.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("") | |
| } | |
| Column ( | |
| modifier = Modifier.fillMaxSize(), | |
| verticalArrangement = Arrangement.Center, | |
| horizontalAlignment = Alignment.CenterHorizontally | |
| ) { | |
| Image(painter = painterResource(id = R.drawable.login_image), contentDescription = "Login Logo", | |
| modifier = Modifier.size(200.dp)) | |
| Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold) | |
| Spacer(modifier = Modifier.height(4.dp)) | |
| Text(text = "Login to your account") | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| OutlinedTextField(value = email, onValueChange = { email = it }, label = { | |
| Text(text = "Email Address") | |
| }) | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| OutlinedTextField(value = password, onValueChange = { password = it }, label = { | |
| Text(text = "Password") | |
| }, visualTransformation = PasswordVisualTransformation()) | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| Button(onClick = { Log.i("Credential", "Email : $email Password : $password") }) { | |
| Text(text = "Login") | |
| } | |
| Spacer(modifier = Modifier.height(32.dp)) | |
| Text(text = "Forgot Password", modifier = Modifier.clickable { }) | |
| Row ( | |
| modifier = Modifier | |
| .fillMaxSize() | |
| .padding(40.dp), | |
| horizontalArrangement = Arrangement.SpaceEvenly | |
| ) { | |
| Image(painter = painterResource(id = R.drawable.facebook_logo), | |
| contentDescription = "Facebook Logo", | |
| modifier = Modifier | |
| .size(40.dp) | |
| .clickable { } | |
| ) | |
| Image(painter = painterResource(id = R.drawable.google_logo), | |
| contentDescription = "Google Logo", | |
| modifier = Modifier | |
| .size(40.dp) | |
| .clickable { } | |
| ) | |
| Image(painter = painterResource(id = R.drawable.x_logo), | |
| contentDescription = "X Logo", | |
| modifier = Modifier | |
| .size(40.dp) | |
| .clickable { } | |
| ) | |
| } | |
| } | |
| } |
| package com.ariefbadrussholeh.mylogin | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| LoginScreen() | |
| } | |
| } | |
| } |
Fungsi LoginScreen adalah untuk membuat tata letak (layout) halaman login menggunakan Jetpack Compose. Pertama, variabel email dan password digunakan untuk menyimpan nilai dari alamat email dan kata sandi yang dimasukkan oleh pengguna. Ini dicapai menggunakan remember dan mutableStateOf untuk mengingat dan memperbarui nilai-nilai tersebut ketika pengguna memasukkan atau mengubah data.
Selanjutnya, kita memiliki struktur tata letak dalam bentuk Column, yang menempatkan semua komponen secara vertikal tengah dengan menggunakan Alignment.CenterHorizontally. Di dalamnya, ada Image yang menampilkan gambar login, diikuti oleh dua Text yang memberikan pesan sambutan dan instruksi untuk login.
Kemudian, ada dua OutlinedTextField, yang merupakan komponen input teks dengan border yang ditampilkan. Yang pertama adalah untuk memasukkan alamat email dan yang kedua adalah untuk memasukkan kata sandi. Masing-masing dari mereka dihubungkan dengan variabel email dan password yang telah didefinisikan sebelumnya.
Setelah itu, ada tombol Button dengan teks Login, yang akan menampilkan informasi alamat email dan kata sandi di log saat ditekan. Di bagian bawahnya, terdapat teks Forgot Password yang dapat diklik, namun belum diimplementasikan fungsinya.
Terakhir, ada baris horizontal yang berisi tiga Image, masing-masing mewakili logo dari platform login sosial seperti Facebook, Google, dan platform X. Semua logo tersebut dapat diklik, namun fungsi klik belum diimplementasikan.
Fungsi LoginScreen kemudian dipanggil di dalam MainActivity.kt.
Langkah Terakhir adalah menjalankan aplikasi. Berikut adalah tampilan aplikasi pada perangkat Android:
Dan berikut adalah hasil input email dan password yang dimasukkan dalam log:
Komentar
Posting Komentar