MEMBUAT HALAMAN LOGIN SIMPLE

Tugas 4 - Membuat Halaman Login Simple

Nama : Wahyu Tri Saputro

NRP : 5025201217

Kelas : PPB - B

Tugas keempat kali ini adalah membuat sebuah login page/login button sederhana. Langsung saja seperti biasa buat project baru di Android Studio. Setelah itu delete Composable, Preview, dan isi MainActivity karena kita akan menggantinya nanti. Kemudian buat kotlin class baru dengan nama LoginScreen di dalam package android. Buat sebuah function di dalam class LoginScreen untuk mengetes apakah tampilan teks muncul atau tidak. Setelah dibuat functionnya, panggil class tersebut di dalam MainActivity.

Setelah itu coba run apakah muncul text. Setelah itu, saya sudah memiliki gambar untuk login screen saya. Copy dan masukkan gambar ke folder drawables di Android Studio. Lalu masukkan gambar ke dalam class LoginScreen seperti di Dice Roller dan tambahkan text. Namun nanti hasilnya text akan overlap dengan gambar sehingga selanjutnya adalah menggunakan row dan column. Di dalam column, kita bisa edit dan menambahkan modifier untuk mempercantik login screen. Kita juga bisa menambahkan text field untuk input email dan password.

Selanjuutnya adalah membuat button di dalam LoginScreen. Tombol yang akan dibuat adalah tombol Login dan tombol Forget Password. Sama seperti membuat text field hanya saja perbedaanya ada di composable yang ada di dalam function. Jika text field menggunakan OutlinedTextField maka button hanya tinggal mengubah ke Button saja dan otomatis akan terisi dan bisa dimodifikasi sesuai kebutuhan. Untuk forget password, tombol yang digunakan berbeda dengan tombol biasanya, melainkan dengan TextButton. Atau jika ingin langsung klik dari text, maka tambahkan modifier clickable di dalam composable text.

Selanjutnya, membuat opsi login lewat social media yang lain. Masukkan logo ke dalam drawables seperti biasa. Namun logo - logo tersebut akan dibuat ke dalam row, maka tinggal membuat row composable dan memasukkan composable - composable logo ke dalamnya. 

Text field email dan password bisa diklik tapi tidak bisa diisi, maka selanjutnya adalah membuat variable untuk dapat mengisi text field tersebut dan passing  value ke dalam text field email dan password.

package com.example.simplelogin

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.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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.a), contentDescription = "Login Image",
            modifier = Modifier.size(300.dp))

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

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

        Text(text = "Login to Your Account")

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

        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(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Image(painter = painterResource(id = R.drawable.facebook),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    })

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

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

Reference : Simple Login Page 🔥 | Jetpack Compose 🚀 | Android Studio | 2024 (youtube.com)

Source Code : KobamYo/Simple_Login_PPB-B (github.com)