Basic Login Screen with Jetpack Compose

In this exercise, you will build a simple login screen in Android Studio using Jetpack Compose.

You are not expected to build a completely functional login app. You will not be able to input in the text fields and the login button will not verify username and the password. Rather, the purpose here is to exercise laying out multiple composables and build a nice presentable UI.

🟢 ANDROID WITH MACHINE LEARNING! (COURSE)

🟢 KOTLIN DEVELOPMENT! (COURSE)

Below is the complete solution to the exercise. This should be the code in your project’s MainActivity.kt file.

For positioning the content in the center of the screen, set alignment and arrangement properties of the Column.

@Composable
fun LoginScreen() {
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
 }
}

Add an image to the login screen

@Composable
fun LoginScreen() {
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.littlelemonlogo),
            contentDescription = "Login Logo"
        )
    }
}

Add a text field for the username & password

@Composable
fun LoginScreen() {
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.littlelemonlogo),
            contentDescription = "Login Logo"
        )

        TextField(value = "", onValueChange = {}, label = { Text(text = "Username") })
        TextField(value = "", onValueChange = {}, label = { Text(text = "Password") })
    }
}

Add a login button

@Composable
fun LoginScreen() {
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.littlelemonlogo),
            contentDescription = "Login Logo"
        )

        TextField(value = "", onValueChange = {}, label = { Text(text = "Username") })
        TextField(value = "", onValueChange = {}, label = { Text(text = "Password") })

        Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.buttonColors(Color.LightGray)) {
            Text(text = "Login!", color = Color.Black)
        }
    }
}

Define a preview for the login screen

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview(){
    LoginScreen()
}

class LittleLemonLoginScreen : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
        super.onCreate(savedInstanceState, persistentState)
        setContent {
            MetaJetpackComposeCourseTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LoginScreen()
                }
            }
        }
    }
}

This is what the output should look like:

İbrahim Can Erdoğan

LINKEDIN

YOUTUBE

UDEMY

GITHUB