Android — State Management for TextField in Jetpack Compose

In this tutorial we will create a Login Form that uses TextField to change the State of the app.

This is what we will build:

• A Scaffold component that will open Snackbar asynchronous.
• Two variables will be used by an OutlinedTextField component to insert email and password.
• A Button that will validate the data.
• When we will click the button, we will see a Snackbar which will inform us about the result of the form validation.

This will be our final application:

Final App

1. Create our Scaffold

Let’s build a Composable function that will contain the main Scaffold.

The Scaffold component is a Composable that defines a layout based on the Material Design of Google.

In this Composable, we have defined the scaffoldState variable that will open the Snackbar.

The email and password are mutable strings that will be changed based on the TextField value.

The scope variable will let us open a Snackbar in an async way.

2. Email Text Field

Let’s create our Email Component.

Email Text Field

This Composable has the mutable string email as an input parameter.
In this way, when then onValueChange is called, we can change the value of the email and see it directly on the OutlinedTextField value.

The field keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email) will inform Android that we are inserting an Email so it will use a specific keyboard.

The function onValueChange returns a string inside the IT variable which will override the email value.

3. Password Text Field

Let’s build our Password component.

Password Text Field

This Composable has the mutable string password as an input parameter.
In this way, when then onValueChange is called, we can change the value of the email and see it directly on the OutlinedTextField value.

The field visualTransformation = passwordVisualTransformation() will hide the password which we are inserting.

The field keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password) will inform Android that we are inserting a password.

The function onValueChange returns a string into the IT variable which will override the password value.

4. Insert the Login Button

Let’s create a button where we are going to validate the email and password values.

Login Button

In the function onClick, we are asynchronously launching the validation.

The async call has been done by using scope.launch.

If the checkValidity function returns TRUE, we will open a Snackbar that will inform us that Login has been done successfully.
If the checkValidity function returns FALSE, we will open a Snackbar that will inform us that something was wrong.

The Snackbar has been opened by using the scaffondState.

5. Email and Password Validation

The checkValidity is a function that will be called when I click on the Login button.

Email Validation

The isValidEmail function has the email as a parameter and checks if it’s a valid email (having for example the @ character)

For the password, we will check only if it’s not null.
Anyway, you can create your isValidPassword function where you can put all the logic that you want.

CONGRATS! 👏 👏 👏

We’ve finished an app that uses Jetpack Compose and State Management inside a TextField.

Here you can find the complete code.

https://gist.github.com/munsra/a3c26cdfb2f1789ac34d2bde00e0c9af

Thank you for reading this post! See you soon!