Membuat Login Screen

Pertemuan 7

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Membuat Login Screen

Dokumentasi

Source Code

GitHub: Go to code!

package com.example.login_page_android_app

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.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
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.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun LoginScreen() {

    var username by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.pesanlapang_logo),
            contentDescription = "PesanLapang Logo",
            modifier = Modifier
                .size(300.dp)
        )

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

        Text("Welcome Back!", fontSize = 28.sp, fontWeight = FontWeight.Bold)

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

        OutlinedTextField(
            value = username ,
            onValueChange = {
                username = it
            },
            label = { Text("Username") }
        )

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

        OutlinedTextField(
            value = password ,
            onValueChange = {
                password = it
            },
            label = { Text("Password") }
        )

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

        Button(onClick = {}) {
            Text("Login")
        }

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

        Text("Or Login Using", fontSize = 16.sp)

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

        Row {
            Image(
                painter = painterResource(id = R.drawable.facebook),
                contentDescription = "Facebook Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Facebook Clicked
                    }
            )

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

            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "Google Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Google Clicked
                    }
            )

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

            Image(
                painter = painterResource(id = R.drawable.apple),
                contentDescription = "Apple Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Apple Clicked
                    }
            )
        }

    }
}

Pada pertemuan ini ditugaskan membuat Login Page. Antarmuka ini menyajikan elemen-elemen umum yang terdapat dalam halaman login seperti logo aplikasi, input untuk username dan password, tombol login, serta opsi login alternatif menggunakan Facebook, Google, dan Apple. Berikut adalah penjelasan lebih detail dari implementasi yang dilakukan.

Variabel, remember, dan mutableStateOf

Variabel username dan password disimpan menggunakan remember dan mutableStateOf, sehingga perubahan nilai yang dimasukkan pengguna akan langsung tercermin di UI. Komponen Column digunakan untuk menyusun elemen-elemen secara vertikal, dengan posisi tengah secara horizontal dan vertikal. Di dalam kolom tersebut, pertama-tama ditampilkan logo aplikasi melalui komponen Image, kemudian disusul dengan teks sambutan "Welcome Back!".

OutlinedTextField

Selanjutnya terdapat dua buah OutlinedTextField untuk memasukkan username dan password. Setelah itu ada tombol Login, meskipun belum ada aksi yang dijalankan saat tombol ditekan (fungsi onClick-nya kosong). Di bawahnya, terdapat teks "Or Login Using" yang menunjukkan bahwa pengguna juga bisa login menggunakan akun media sosial.

Row Login Media Sosial

Opsi login media sosial ini ditampilkan dalam Row, yaitu baris horizontal yang berisi tiga logo: Facebook, Google, dan Apple. Masing-masing logo dibungkus dengan Image dan diberi properti clickable, sehingga nantinya bisa dipasangkan dengan aksi tertentu jika pengguna menekan salah satu ikon.

Kesimpulan

Secara keseluruhan, kode ini menyusun halaman login sederhana namun fungsional menggunakan pendekatan deklaratif Jetpack Compose, dan masih dapat dikembangkan lebih lanjut dengan validasi data, integrasi autentikasi, atau navigasi ke halaman lain.