Pertemuan 7 - Login UI

Naufal Khairul Rizky - 5025221127

Login UI

Aplikasi ini merupakan implementasi tampilan login sederhana menggunakan Jetpack Compose. Aplikasi ini menyediakan antarmuka pengguna untuk memasukkan email dan password, serta opsi login melalui media sosial seperti Google, Twitter, dan Facebook.

1. MainActivity.kt

Saat aplikasi dijalankan, fungsi onCreate() akan dipanggil:

enableEdgeToEdge() digunakan agar konten aplikasi bisa tampil penuh di seluruh layar perangkat.
setContent { ... } memanggil fungsi LoginScreen() sebagai UI utama yang akan ditampilkan ke pengguna.
MaterialTheme digunakan untuk membungkus seluruh antarmuka agar mengikuti tema Material 3.
Surface(modifier = Modifier.fillMaxSize()) menjadi wadah dasar untuk menampilkan komponen UI secara penuh.

2. LoginScreen()

Fungsi @Composable utama untuk membangun antarmuka halaman login. Di dalamnya terdapat:

a. State Management

Menggunakan remember dan mutableStateOf untuk menyimpan data input dari pengguna:

email: Menyimpan alamat email yang dimasukkan pengguna.
password: Menyimpan kata sandi yang dimasukkan pengguna.

b. Struktur Tata Letak UI

Menggunakan Column dengan verticalArrangement = Arrangement.Center dan horizontalAlignment = Alignment.CenterHorizontally untuk menyusun elemen-elemen UI secara vertikal dan terpusat di tengah layar.

Berikut komponen-komponen yang digunakan:

Gambar Logo
Menggunakan Image() untuk menampilkan logo login yang bersumber dari drawable (R.drawable.a).
Teks Sambutan
Menampilkan teks seperti "Welcome Back" dan "Login to your account" dengan gaya huruf berbeda.
Input Email dan Password
- Menggunakan OutlinedTextField untuk kolom input email.
- OutlinedTextField kedua untuk input password dengan PasswordVisualTransformation() agar karakter disembunyikan.
- KeyboardOptions dengan KeyboardType.Password untuk jenis inputan password.
Tombol Login
- Menggunakan Button berlabel "Login", namun saat ini belum menjalankan aksi apa pun (onClick = {}).
- Ukuran tombol diatur agar proporsional dan simetris.
Tautan Lupa Password
- Menampilkan teks “Forgot Password?” yang dapat diklik.
- Diberi warna primer dari MaterialTheme.
Ikon Media Sosial (Google, Twitter, Facebook)

Menggunakan Image() untuk menampilkan ikon media sosial dari drawable (google, twitter, fb).
Setiap ikon dapat diklik (Modifier.clickable {}) sebagai tempat untuk aksi login alternatif.

Source 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.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
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.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation

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

@Composable
fun LoginScreen() {
    // State variables for email and password fields
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 32.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Logo Image
        Image(
            painter = painterResource(id = R.drawable.a),
            contentDescription = "Login image",
            modifier = Modifier
                .size(150.dp)
                .padding(bottom = 24.dp)
        )

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

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

        Text(
            text = "Login to your account",
            fontSize = 16.sp,
            color = MaterialTheme.colorScheme.onSurfaceVariant
        )

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

        // Email TextField
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email address") },
            modifier = Modifier.fillMaxWidth()
        )

        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)
        )

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

        // Login Button
        Button(
            onClick = {},
            modifier = Modifier
                .width(200.dp)
                .height(50.dp)
                .align(Alignment.CenterHorizontally)
        ) {
            Text(text = "Login")
        }

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

        // Forgot Password Text
        Text(
            text = "Forgot Password?",
            modifier = Modifier.clickable {},
            color = MaterialTheme.colorScheme.primary
        )

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

        // Divider with Text
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            HorizontalDivider(modifier = Modifier.weight(1f))
            Text(
                text = "  Or sign in with  ",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            HorizontalDivider(modifier = Modifier.weight(1f))
        }

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

        // Social Media Icons
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            // Google Icon
            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "Google",
                modifier = Modifier
                    .size(48.dp)
                    .clickable{}
            )

            // Twitter Icon
            Image(
                painter = painterResource(id = R.drawable.twitter),
                contentDescription = "Twitter",
                modifier = Modifier
                    .size(48.dp)
                    .clickable{}
            )

            // Facebook Icon
            Image(
                painter = painterResource(id = R.drawable.fb),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(48.dp)
                    .clickable{}
            )
        }
    }
}

naufalkr

Cari Blog Ini