loginPage

LoginPage adalah aplikasi Android sederhana yang menampilkan halaman login yang dibangun menggunakan Jetpack Compose Material 3. Aplikasi ini bertujuan untuk memberikan contoh dasar tentang bagaimana membuat UI interaktif dan modern dengan Jetpack Compose.

Fitur Utama

1. Form Login: Menampilkan dua input field untuk username dan password.
2. Input Teks yang Aman: Password field menggunakan visual transformation untuk menyembunyikan teks password.
3. Desain Responsif: Layout yang menyesuaikan diri dengan berbagai ukuran layar dan orientasi perangkat.
4. Tombol Login: Tombol untuk memicu aksi login ketika ditekan.
   
   Berikut adalah source code dan tampilanya:
   
   

   package com.example.loginpage
   
   import android.os.Bundle
   import androidx.activity.ComponentActivity
   import androidx.activity.compose.setContent
   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.text.input.ImeAction
   import androidx.compose.ui.text.input.KeyboardType
   import androidx.compose.ui.text.input.PasswordVisualTransformation
   import androidx.compose.ui.unit.dp
   import androidx.compose.ui.tooling.preview.Preview
   import com.example.loginpage.ui.theme.LoginPageTheme
   
   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               LoginPageTheme {
                   LoginScreen()
               }
           }
       }
   }
   
   @Composable
   fun LoginScreen() {
       var username by remember { mutableStateOf("") }
       var password by remember { mutableStateOf("") }
   
       Column(
           modifier = Modifier
               .fillMaxSize()
               .padding(16.dp),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Text(text = "Login", style = MaterialTheme.typography.headlineMedium)
           Spacer(modifier = Modifier.height(16.dp))
           OutlinedTextField(
               value = username,
               onValueChange = { username = it },
               label = { Text("Username") },
               modifier = Modifier.fillMaxWidth()
           )
           Spacer(modifier = Modifier.height(8.dp))
           OutlinedTextField(
               value = password,
               onValueChange = { password = it },
               label = { Text("Password") },
               modifier = Modifier.fillMaxWidth(),
               visualTransformation = PasswordVisualTransformation(),
               keyboardOptions = KeyboardOptions.Default.copy(
                   keyboardType = KeyboardType.Password,
                   imeAction = ImeAction.Done
               )
           )
           Spacer(modifier = Modifier.height(16.dp))
           Button(
               onClick = { /* Handle login action */ },
               modifier = Modifier.fillMaxWidth()
           ) {
               Text(text = "Login")
           }
       }
   }
   
   @Preview(showBackground = true)
   @Composable
   fun LoginScreenPreview() {
       LoginPageTheme {
           LoginScreen()
       }
   }
   

   Tampilan Login: