Pertemuan 7 - 08/04/2026

Nama  : Triana Velia Hutabalian

NRP   : 5025231190

Kelas  : PPB(B)

Pada pertemuan ketujuh ini, kami mempraktikkan pembuatan Halaman Login menggunakan Kotlin dan Jetpack Compose di Android Studio. Aplikasi ini menampilkan ilustrasi gambar di bagian atas, dua OutlinedTextField untuk input email dan password, tombol Login, tautan Forgot Password?, serta ikon sosial (Facebook, Google, Twitter/X) di bagian bawah. Konsep utama yang dipelajari adalah pembuatan Composable terpisah (LoginScreen), pengelolaan State dengan remember dan mutableStateOf, penggunaan PasswordVisualTransformation, serta pemuatan gambar lokal dari folder res/drawable.

 Langkah Pengerjaan

1

Membuat project baru di Android Studio dengan template Empty Activity, nama project MyLogin, package com.example.mylogin, dan Minimum SDK API 26.

2

Menghapus kode default pada MainActivity.kt — fungsi Greeting dan GreetingPreview dihapus, isi setContent {} dikosongkan untuk diganti dengan pemanggilan composable baru.

3

Membuat file baru LoginScreen.kt di dalam package dengan klik kanan pada package → New → Kotlin File/Class, lalu mendeklarasikan fungsi @Composable fun LoginScreen().

4

Menambahkan gambar ilustrasi (a.png) ke folder res/drawable dengan cara drag-and-drop, lalu menampilkannya menggunakan Image(painter = painterResource(id = R.drawable.a), modifier = Modifier.size(200.dp)).

5

Menambahkan teks "Welcome Back" dengan fontSize = 28.sp dan fontWeight = FontWeight.Bold, serta subteks "Login to your account" dengan spasi antar elemen menggunakan Spacer(modifier = Modifier.height(4.dp)).

6

Mendeklarasikan dua state: var email by remember { mutableStateOf("") } dan var password by remember { mutableStateOf("") }, lalu menggunakannya pada dua OutlinedTextField dengan label masing-masing.

7

Menambahkan visualTransformation = PasswordVisualTransformation() pada field password agar karakter yang diketik tersembunyi, serta menambahkan tombol Button { Text("Login") } dengan lebar penuh.

8

Menambahkan teks "Forgot Password?" dengan Modifier.clickable, teks "Or sign in with", lalu menyalin tiga file ikon sosial (fb.png, google.png, twitter.png) ke res/drawable dan menampilkannya dalam Row dengan Arrangement.SpaceEvenly.

9

Memanggil LoginScreen() dari MainActivity.kt di dalam blok setContent {}, lalu menjalankan aplikasi di emulator Pixel 6 API 34 untuk memverifikasi tampilan lengkap halaman login.

 Konsep yang Dipelajari

@Composable + Column

Fungsi composable LoginScreen() menggunakan Column dengan verticalArrangement = Center dan horizontalAlignment = CenterHorizontally untuk memusatkan semua elemen.

remember + mutableStateOf

Menyimpan state input email dan password agar tidak reset saat recomposition dan memicu pembaruan UI otomatis ketika nilainya berubah.

OutlinedTextField

Komponen input Material3 dengan border outline, mendukung onValueChange dan PasswordVisualTransformation untuk menyembunyikan karakter password.

painterResource

Memuat gambar dari folder res/drawable menggunakan painterResource(id = R.drawable.nama) yang diteruskan ke composable Image().

Modifier.clickable

Menambahkan interaksi klik pada elemen yang secara default tidak dapat diklik, seperti Text dan Image, tanpa perlu membungkusnya dalam Button.

Row + Arrangement

Menyusun ikon sosial secara horizontal menggunakan Row dengan horizontalArrangement = Arrangement.SpaceEvenly agar jarak antar ikon merata.

 Kode Program

LoginScreen.kt

package com.example.mylogin

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.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()
            .padding(horizontal = 24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Gambar ilustrasi
        Image(
            painter = painterResource(id = R.drawable.a),
            contentDescription = "Login image",
            modifier = Modifier.size(200.dp)
        )
        Spacer(modifier = Modifier.height(16.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(24.dp))

        // Field Email
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email address") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))

        // Field Password
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))

        // Tombol Login
        Button(
            onClick = { },
            modifier = Modifier.fillMaxWidth().height(50.dp)
        ) {
            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")
        Spacer(modifier = Modifier.height(16.dp))

        // Ikon Sosial
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Image(painter = painterResource(R.drawable.fb),
                contentDescription = "Facebook",
                modifier = Modifier.size(60.dp).clickable { })
            Image(painter = painterResource(R.drawable.google),
                contentDescription = "Google",
                modifier = Modifier.size(60.dp).clickable { })
            Image(painter = painterResource(R.drawable.twitter),
                contentDescription = "Twitter",
                modifier = Modifier.size(60.dp).clickable { })
        }
    }
}

 Hasil Output

LoginScreen.kt — Android Studio · Pixel 6 API 34