Tugas 5 - Pemrograman Perangkat Bergerak

 Hesekiel Nainggolan

5025201054

PPB I

Membuat Halaman Login

Pada kesempatan kali ini, kita akan membuat Halaman Login Sederhana dengan fitur tambahan Login menggunakan opsi lainnya, yaitu ke FB, Google Akun, dan Twitter. Untuk kali ini, kita akan membuat Halaman Login ke Aplikasi Ruang Dosen.

Berikut Sumber Kodenya :

MainActivity :

	package com.example.mylogin
	import android.os.Bundle
	import androidx.activity.ComponentActivity
	import androidx.activity.compose.setContent
	import androidx.compose.foundation.layout.fillMaxSize
	import androidx.compose.material3.MaterialTheme
	import androidx.compose.material3.Surface
	import androidx.compose.material3.Text
	import androidx.compose.runtime.Composable
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.tooling.preview.Preview
	import com.example.mylogin.ui.theme.MyLoginTheme
	class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
	LoginScreen()
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

LoginScreen.kt :

	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.OutlinedTextField
	import androidx.compose.material3.Text
	import androidx.compose.material3.TextButton
	import androidx.compose.material3.TextField
	import androidx.compose.runtime.Composable
	import androidx.compose.runtime.getValue
	import androidx.compose.runtime.mutableStateOf
	import androidx.compose.runtime.remember
	import androidx.compose.runtime.setValue
	import androidx.compose.ui.Alignment
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.res.painterResource
	import androidx.compose.ui.text.font.Font
	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
	@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.logo), contentDescription = "Login Image",
	modifier = Modifier.size(300.dp))
	Text(text = "WELCOME", fontSize = 28.sp, fontWeight = FontWeight.Bold)
	Spacer(modifier = Modifier.height(4.dp))
	Text(text = "Login to Ruang Dosen")
	Spacer(modifier = Modifier.height(16.dp))
	OutlinedTextField(value = email, onValueChange = {email = it}, label = {
	Text(text = "Email")
	})
	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 : $email")}) {
	Text(text = "LOGIN")
	}
	Spacer(modifier = Modifier.height(16.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))
	Row (modifier = Modifier
	.fillMaxWidth()
	.padding(40.dp),
	horizontalArrangement = Arrangement.SpaceEvenly
	){
	Image(painter = painterResource(id = R.drawable.fb),
	contentDescription = "login 1",
	modifier = Modifier
	.size(60.dp)
	.clickable {
	}
	)
	Image(painter = painterResource(id = R.drawable.gg),
	contentDescription = "login 2",
	modifier = Modifier
	.size(60.dp)
	.clickable {
	}
	)
	Image(painter = painterResource(id = R.drawable.twit),
	contentDescription = "login 3",
	modifier = Modifier
	.size(60.dp)
	.clickable {
	}
	)
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Hasil :

Jika login menggunakan Email dan Username gagal, maka dapat melakukan login menggunakan opsi lainnya di menu ikon FB, Google, dan Twitter.

Video :