Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple demo of using Jetpack Compose to build a Login screen
package se.hellsoft.jetpackcomposeintro
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.Model
import androidx.compose.state
import androidx.compose.unaryPlus
import androidx.ui.core.*
import androidx.ui.foundation.shape.border.Border
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.Button
import androidx.ui.material.MaterialTheme
import androidx.ui.material.surface.Surface
import androidx.ui.tooling.preview.Preview
@Model
class UserInfo(
var userLoggedIn: Boolean = false,
var userName: String = ""
)
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
AppScreen(UserInfo())
}
}
}
}
@Composable
fun AppScreen(userInfo: UserInfo) {
if (!userInfo.userLoggedIn) {
LoginScreen(userInfo)
} else {
UserInfoScreen(userInfo)
}
}
@Composable
fun UserInfoScreen(userInfo: UserInfo) {
Column(modifier = Spacing(8.dp)) {
Text(
text = "Username: ${userInfo.userName}",
modifier = Spacing(8.dp),
style = (+MaterialTheme.typography()).h6
)
}
}
@Composable
fun LoginScreen(userInfo: UserInfo = UserInfo()) {
Column {
val userNameState = +state { "" }
Text(
text = "Username:",
modifier = Spacing(8.dp),
style = (+MaterialTheme.typography()).h4
)
Surface(border = Border(Color.Gray, 1.dp), modifier = Spacing(8.dp)) {
Padding(8.dp) {
TextField(
value = userNameState.value,
onValueChange = { userNameState.value = it }
)
}
}
val passwordState = +state { "" }
Text(
text = "Password:",
modifier = Spacing(8.dp),
style = (+MaterialTheme.typography()).h4
)
Surface(border = Border(Color.Gray, 1.dp), modifier = Spacing(8.dp)) {
Padding(padding = 8.dp) {
PasswordTextField(
value = passwordState.value,
onValueChange = { passwordState.value = it }
)
}
}
if (userNameState.value.isNotEmpty()
&& passwordState.value.isNotEmpty()
) {
Row(arrangement = Arrangement.End) {
Button(
text = "Login",
modifier = Spacing(8.dp),
onClick = {
println("Logged in!")
userInfo.userName = userNameState.value
userInfo.userLoggedIn = true
}
)
}
} else {
Text(
text = "Please enter both username and password!",
modifier = Spacing(8.dp),
style = (+MaterialTheme.typography()).h6
)
}
}
}
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
LoginScreen()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment