5025221154 Helsa Sriprameswari Putri - Tugas 7 Membuat Halaman Simple Login

 Membuat Halaman Simple Login 📲

🔗Link Github :
https://github.com/helsasp/Tugas7_PPB_LoginPage

🔗Link Demo :

🔍Souce Code :

 MainActivity.kt

package com.example.mylogin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.mylogin.ui.theme.MyLoginTheme


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

LoginScreen.kt :

package com.example.mylogin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
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.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.RoundedCornerShape

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(40.dp))

        Image(
            painter = painterResource(id = R.drawable.login),
            contentDescription = "Login Illustration",
            modifier = Modifier
                .height(200.dp)
                .fillMaxWidth()
        )

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

        Text("Welcome Back", style = MaterialTheme.typography.bodyLarge)
        Text("Login to your account", style = MaterialTheme.typography.bodyMedium)

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

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

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

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            singleLine = true,
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            modifier = Modifier.fillMaxWidth()
        )

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

        Button(
            onClick = { },
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp),
            shape = RoundedCornerShape(24.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF7C4DFF))
        ) {
            Text("Login", color = Color.White)
        }

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

        TextButton(onClick = { }) {
            Text("Forgot Password?")
        }

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

        Text("Or sign in with", fontSize = 14.sp)

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

        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxWidth()
        ) {
            IconButton(onClick = { }) {
                Image(
                    painter = painterResource(id = R.drawable.fb),
                    contentDescription = "Facebook",
                    modifier = Modifier.size(40.dp)
                )
            }

            IconButton(onClick = { }) {
                Image(
                    painter = painterResource(id = R.drawable.google),
                    contentDescription = "Google",
                    modifier = Modifier.size(40.dp)
                )
            }

            IconButton(onClick = { }) {
                Image(
                    painter = painterResource(id = R.drawable.x),
                    contentDescription = "Other",
                    modifier = Modifier.size(40.dp)
                )
            }
        }
    }
}

💻 Penjelasan :

🔸 MainActivity.kt

1. Inheritance dari ComponentActivity
   MainActivity mewarisi ComponentActivity, class dasar untuk aktivitas Compose.

2. Fungsi onCreate
   Fungsi utama yang dijalankan saat aplikasi dibuka. Di sini UI diatur menggunakan setContent.

3. Penggunaan MyLoginTheme
   Mengatur tema aplikasi agar konsisten di seluruh tampilan.

4. Menampilkan LoginScreen()
   Fungsi Compose LoginScreen() dipanggil untuk menampilkan tampilan login di dalam Surface

🔸 LoginScreen.kt

1. State untuk Email & Password
   email dan password menggunakan remember dan mutableStateOf agar UI bisa bereaksi saat nilai berubah.

2. Layout Kolom
   Menggunakan Column agar semua elemen UI ditata secara vertikal dan terpusat.

3. Ilustrasi Login
   Gambar login ditampilkan di bagian atas dengan Image dan painterResource.

4. Text Penyambutan
   Dua Text untuk menyapa pengguna dan memberi instruksi login.

5. Input Email dan Password
   Menggunakan OutlinedTextField untuk inputan dengan label dan dukungan pengamanan untuk password.

6. Tombol Login
   Button berwarna ungu dengan teks putih dan sudut bulat. Belum ada aksi saat diklik (masih kosong).

7. Tautan Lupa Password
   TextButton disediakan jika pengguna lupa password.

8. Login Alternatif
   Tulisan dan ikon untuk login via Facebook, Google, atau X (Twitter) menggunakan IconButton dengan gambar.

🖼️ App Preview :