Membuat Home Screen Simple Login

 

PPB I - Tugas 5

Membuat Home Screen Simple Login

    Nama :Michael Ariel Manihuruk

    NRP : 5025201158

    Kelas : PPB-I

    Link Github : Tugas 5

    Pada kesempatan kali ini kita akan diajak untuk membuat halaman login sederhana dengan hasil sebagai berikut.

    Adapun code dari LoginScreen.kt dapat dilihat dari code sebagai berikut.

	package com.example.mylogin
	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.ExperimentalMaterial3Api
	import androidx.compose.material3.OutlinedTextField
	import androidx.compose.material3.Text
	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.tooling.preview.Preview
	import androidx.compose.ui.unit.dp
	import androidx.compose.ui.unit.sp
	@OptIn(ExperimentalMaterial3Api::class)
	@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.bglogin), 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")
	}
	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(60.dp)
	.clickable {
	})
	Image(painter = painterResource(id = R.drawable.google), contentDescription = "Google",
	modifier = Modifier
	.size(60.dp)
	.clickable {
	})
	Image(painter = painterResource(id = R.drawable.twitter),
	contentDescription = "Twitter",
	modifier = Modifier
	.size(60.dp)
	.clickable {
	})
	}
	}
	}
	@Preview(showBackground = true, showSystemUi = true, name = "My Preview" )
	@Composable
	fun LoginScreenPreview(){
	LoginScreen()
	}

view raw LoginScreen.kt hosted with ❤ by GitHub