Jetpack compose: How to handle changes in a TextField

Introduction

This Jetpack Compose code demonstrates how to create a text field that allows users to enter text and displays the entered text below the field. It also showcases how to handle changes in the text field using state variables.

Breakdown

  1. Import necessary libraries:

    • androidx.appcompat.app.AppCompatActivity: This library provides the base class for activities in Android.
    • androidx.compose.*: This library imports all the Compose UI components and utilities.

  2. Create a new composable function 'MainContent':

    • This function creates a Column layout with padding of 25dp.
    • It uses the remember composable to create a mutable state variable textState of type TextFieldValue, which is initially empty. This state variable will store the current text entered by the user in the text field.

  3. Text Field:

    • A TextField composable is used to display a label "Enter Country" and a text field for user input.
      • The value parameter of the TextField is set to the current value of the textState variable. This means that the text displayed in the text field will reflect the current state of the textState variable.
      • The onValueChange parameter is a callback function that gets called whenever the user changes the text in the text field. When the user types new text, this callback function is triggered, and the new text is stored in the textState variable.
      • The label parameter is set to a Text composable that displays the label "Enter Country". This label helps users understand what kind of information they should enter in the text field.
      • The keyboardOptions parameter is set to specify that the keyboard should be in text mode, which is appropriate for entering country names.
      • The textStyle parameter is used to style the text in the text field. In this case, it's set to Monospace font, bold weight, 25sp font size, and normal style.

  4. Display Entered Text:

    • Below the TextField, a Text composable is used to display the entered text. The text displayed is "You entered: " followed by the current value of the textState.text. This Text composable shows the user what they have entered in the text field.
    • The text style for this Text composable is also set using the textStyle parameter.

  5. Set Content:

    • Finally, the setContent function is called to set the content of the activity. It takes the MainContent composable as its argument. This sets the UI of the activity to the content defined in the MainContent composable.

Summary

This code effectively demonstrates how to create a user-friendly text field experience in a Jetpack Compose application. By leveraging state variables and callbacks, the code ensures that the displayed text remains up-to-date with the user's input. The code also incorporates visual styling to enhance the appearance of the text field and the entered text.


MainActivity.kt 

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(Modifier.padding(25.dp)) {
            val textState = remember { mutableStateOf(TextFieldValue())}

            TextField(
                value = textState.value,
                onValueChange = { textState.value = it },
                label = { Text(text = "Enter Country") },
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Text
                ),
                textStyle = TextStyle(
                    fontFamily = FontFamily.Monospace,
                    fontWeight = FontWeight.Bold,
                    fontSize = 25.sp,
                    fontStyle = FontStyle.Normal
                )
            )

            Text(
                text = "You entered : ${textState.value.text}",
                fontSize = 22.sp,
                color = Color.Blue,
                fontFamily = FontFamily.SansSerif,
                fontStyle = FontStyle.Italic,
                modifier = Modifier.padding(top = 25.dp)
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}
More android jetpack compose tutorials