Kotlin with Jetpack Compose— Login Page UI

Photo by Scott Graham on Unsplash

Are you new to Kotlin Jetpack Compose and trying to create an app?

In this demo I will share my experience with an example of a simple app login page UI using JetPack compose. I will guide you to create a simple login screen like below.

Since this screen only contains a text, two input fields and a button we need only very few components.

Input field

I used an outlined text box with a label. We can use the OutlinedTextField component with given parameter values as in my code. You can see the email input field in this example.

Since we need to change the email value on edit we can create the email variable to remember the state.var email by remember { mutableStateOf(“”) } this will do that for us. So we can pass the email as the value and onValueChange as { email = it }. I used a text from res as the label and keyboardType as KeyboardType.Email.

Since I need my Input to take the full available width, I set the modifier to Modifier.fillMaxWidth().

        var email by remember { mutableStateOf("") }
                
                OutlinedTextField(…