Tugas Pertemuan 7 - LoginPage

Nama: Dewa Putu Ananda Taurean Mahesa

NRP: 5025231158

Kelas: Pemrograman Perangkat Bergerak C

Membuat login page sederhana dengan Android Studio dan Jetpack Compose.

1. Package Library

package com.example.loginpage

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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

val PurpleMain = Color(0xFF6200EE)

Di atas adalah library yang diperlukan untuk projek ini.

2. MainActivity

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

Titik masuk aplikasi yang akan menjalankan tampilan halaman login.

3. LoginScreen

@Composable
fun LoginScreen() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Account Illustration
        Icon(
            imageVector = Icons.Default.AccountCircle,
            contentDescription = "Login Illustration",
            modifier = Modifier.size(120.dp),
            tint = PurpleMain
        )

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

        // Welcome Texts
        Text(
            text = "Welcome",
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )
        Text(
            text = "Login to your account",
            fontSize = 16.sp,
            color = Color.Gray
        )

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

        // Email Field
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email Address") },
            leadingIcon = { Icon(Icons.Default.Email, contentDescription = null) },
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(12.dp),
            colors = OutlinedTextFieldDefaults.colors(
                focusedBorderColor = PurpleMain,
                focusedLabelColor = PurpleMain
            )
        )

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

        // Password Field
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            leadingIcon = { Icon(Icons.Default.Lock, contentDescription = null) },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(12.dp),
            colors = OutlinedTextFieldDefaults.colors(
                focusedBorderColor = PurpleMain,
                focusedLabelColor = PurpleMain
            )
        )

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

        // Login Button
        Button(
            onClick = {},
            modifier = Modifier
                .fillMaxWidth()
                .height(55.dp),
            colors = ButtonDefaults.buttonColors(containerColor = PurpleMain),
            shape = RoundedCornerShape(12.dp)
        ) {
            Text("Login", fontSize = 18.sp, color = Color.White)
        }

        // Forgot Password
        TextButton(onClick = {}) {
            Text("Forgot Password?", color = PurpleMain)
        }

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

        // Other Options
        Text("Or sign in with", color = Color.Gray)
        Spacer(modifier = Modifier.height(16.dp))

        Row(
            horizontalArrangement = Arrangement.spacedBy(20.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            SocialIconPlaceholder("G")
            SocialIconPlaceholder("f")
            SocialIconPlaceholder("X")
        }
    }
}

LoginScreen mengatur layout dan elemen dari halaman login. Variabel email dan password akan digunakan untuk menyimpan teks dari field email dan password nanti. Layout elemen disusun dengan Column. Pertama ada ilustrasi berupa icon akun. Lalu ada teks berupa "Welcome" dan "Login to account". Setelah itu ada field untuk input email dan password namun masih berupa UI saja (belum berfungsi). Kemudian ada Login button yang juga masih belum melakukan apapun. Lalu ada teks "Forgot Password" yang bisa ditekan. Terakhir ada section untuk login dengan cara lain yang diatur berupa Row dan menggunakan SocialIconPlaceholder (atau bisa juga menggunakan Image painter bila sudah ada aset gambar, sama halnya dengan ilustrasi akun di atas). Setiap elemen dipisah dengan spacer dengan jarak tertentu.

4. SocialIconPlaceholder

@Composable
fun SocialIconPlaceholder(label: String) {
    OutlinedCard(
        onClick = {},
        modifier = Modifier.size(50.dp),
        shape = RoundedCornerShape(12.dp),
        border = androidx.compose.foundation.BorderStroke(1.dp, Color.LightGray)
    ) {
        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
            Text(
                text = label,
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp,
                color = Color.DarkGray
            )
        }
    }
}

SocialIconPlaceholder adalah komponen "button" untuk section login dengan cara lain. Saat ini juga masih berupa UI, belum ada fungsi apapun.

5. Hasil Akhir

Di atas adalah hasil akhir dari tampilan Login Page yang dibuat.