Tugas PPB Pertemuan 7

Nathanael Valen Susilo

5025231099

Link Repository : https://github.com/Kirytsu/Mobile-Programming-B/tree/main/LoginPage 

Membuat Halaman Login Sederhana

Halaman login ini dibuat dengan beberapa komponen utama: mutable textfield sebagai lokasi input pengguna yakni email dan juga password, tombol untuk login dan beberapa image untuk mendukung tampilan halaman. Halaman ini sifatnya juga hanya berupa UI sederhana karena kode untuk penyimpanan data pengguna belum ditambahkan.

Kelas MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginScreen()
        }
    }
}

Kelas ini dipanggil saat aplikasi pertama dijalankan, dimana akan memanggil fungsi LoginScreen yang memuat seluruh konten yang akan ditampilkan pada halaman login pengguna.

Fungsi LoginScreen 

@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.login), contentDescription = "Login image",
            modifier = Modifier.size(200.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")
        }

        ....
}

Fungsi tersebut berfungsi menampilkan halaman login dengan perataan tengah. Pertama, fungsi akan menggambar konten pada drawable Login dimana akan menampilkan gambar ke halaman login. Lalu selanjutnya ditampilkan teks "Welcome Back" dan "Login to your account" dengan posisi di bawah gambar dengan format text dan juga penambahan spasi (spacer).

Sementara untuk email dan password, sebelumnya dibuat ke dalam satu variabel masing-masing agar dapat disimpan pada aplikasi. Pada tampilan, dibuat dengan textfield sehingga bisa diisi pengguna dan juga nilainya akan disimpan dan ditampilkan berdasarkan input terakhir dari pengguna. Untuk textfield pada password ditambahkan visualTransformation supaya tampilan password di aplikasi otomatis disembunyikan. Lalu juga untuk tombol Login, disini diset untuk melakukan log dengan informasi email dan password yang dimasukkan pengguna. Namun, karena informasi yang disimpan hanya berupa log dan tidak ada fungsi lain untuk login, maka tidak akan ada perubahan halaman ataupun fungsional login yang sebenarnya.

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

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

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

Untuk tampilan dibawahnya (setelah tombol login), berisi teks "Forgot Password" dan juga "Or sign with" yang belum sebagai tombol ke halaman atau fungsi lainnya. Sementara untuk tampilan logo dari signin aplikasi lain, dibuat dalam bentuk baris kemudian logo (facebook, google, dan twitter) digambar menggunakan drawable dan diset sebagai clickable walaupun belum ada isi fungsi lanjutannya untuk signin.

Hasil Halaman Login