Tugas 7 - Pemrograman Perangkat Bergerak G - Membuat UI Login Page Sederhana

Membuat Tampilan UI Login Page Sederhana dengan Android Studio dan Jetpack Compose

Dalam tugas ini, saya Rakha Fathin Izzan Consetta (5025221156) membuat sebuah UI login page sederhana menggunakan Android Studio dan Jetpack Compose. Aplikasi ini bertujuan menampilkan antarmuka login yang modern, responsif, dan mudah dipahami. Fokus utamanya adalah pada tampilan dan interaksi, tanpa koneksi ke backend atau autentikasi yang sesungguhnya.

---

1. Struktur Umum Aplikasi

Proyek ini terdiri dari dua file utama:

• MainActivity.kt – sebagai entry point aplikasi

• LoginScreen.kt – berisi seluruh desain tampilan login

---

2. Penjelasan File MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginScreen()
        }
    }
}

Penjelasan:

• MainActivity adalah activity utama.

• Fungsi setContent {} digunakan untuk menetapkan tampilan UI menggunakan Compose.

• LoginScreen() adalah fungsi composable yang menampilkan halaman login.

---

3. Penjelasan File LoginScreen.kt

File ini memuat seluruh desain UI halaman login. Tampilan dibuat dengan struktur vertikal menggunakan Column.

a. Inisialisasi State

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

Penjelasan:

• Dua buah state digunakan untuk menyimpan nilai input dari pengguna, yaitu email dan password.

• remember digunakan agar nilai tetap tersimpan selama composable aktif.

b. Struktur Kolom dan Elemen UI

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
)

Penjelasan:

• Menggunakan Column untuk menata elemen UI secara vertikal.

• Arrangement.Center dan Alignment.CenterHorizontally membuat elemen berada di tengah layar.

c. Gambar dan Judul

Image(
    painter = painterResource(id = R.drawable.img_login),
    contentDescription = "Login Image",
    modifier = Modifier.size(200.dp)
)
Text("Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)
Text("Login to your account")

Penjelasan:

• Menampilkan gambar login sebagai hiasan.

• Menambahkan teks sambutan dengan ukuran dan gaya huruf tertentu.

d. Input Email dan Password

OutlinedTextField(value = email, onValueChange = { email = it }, label = { Text("Email address") })
OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = PasswordVisualTransformation()
)

Penjelasan:

• Menggunakan OutlinedTextField untuk input yang memiliki label dan border.

• PasswordVisualTransformation() digunakan untuk menyembunyikan karakter password.

e. Tombol Login

Button(onClick = {
    Log.i("Credential", "Email : $email Password : $password")
}) {
    Text("Login")
}

Penjelasan:

• Ketika tombol ditekan, informasi email dan password dicetak di logcat (untuk keperluan pengujian/debug).

f. Fitur Tambahan (Lupa Password & Login Sosial Media)

Text(text = "Forgot password?", modifier = Modifier.clickable {})
Text(text = "Or sign in with")
Row(...) {
    Image(...) // Facebook
    Image(...) // Google
    Image(...) // X/Twitter
}

Penjelasan:

• Memberikan opsi "Lupa Password?" meskipun belum dihubungkan dengan logika apapun.

• Menyediakan ikon media sosial sebagai alternatif login (dekoratif saja untuk saat ini).

---

4. Tampilan UI yang Dihasilkan

Akan muncul credential pada Logcat setelah diklik tombol login:

Tampilan akhir terdiri dari:

• Gambar ilustrasi login

• Judul dan subjudul

• Input untuk email dan password

• Tombol login

• Teks "Forgot password?"

• Ikon login via Facebook, Google, dan X.

---

5. Full Code

di file MainActivity.kt

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.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mylogin.ui.theme.MyLoginTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginScreen()
        }
    }
}

di file LoginScreen.kt

package com.example.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.fillMaxWidth
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.runtime.Composable
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
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.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.img_login),
            contentDescription = "Login Image",
            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"
        )
        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 {

        })

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

        Text(text = "Or sign in with")

        Row (
            modifier = Modifier.fillMaxWidth().padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ){
            Image(
                painter = painterResource(id = R.drawable.fb),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )

            Image(
                painter = painterResource(id = R.drawable.gg),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )

            Image(
                painter = painterResource(id = R.drawable.x),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )
        }
    }

}

---

6. Kesimpulan

Aplikasi ini berhasil membangun tampilan UI login yang sederhana namun fungsional dengan menggunakan Jetpack Compose. Komponen seperti TextField, Button, Image, dan Row memberikan kontrol penuh atas desain dan interaktivitas antarmuka.

Dengan pendekatan deklaratif dari Jetpack Compose, pembuatan UI menjadi lebih efisien dan modern dibandingkan metode XML tradisional.