Jetpack compose: How to use TextField

Jetpack Compose - Understanding the TextField Example

This code demonstrates the usage of TextField composable in Jetpack Compose. It creates a simple text input field where users can enter their name and displays the entered text below the field. Let's break down the code step-by-step:

  1. Setting Up the Activity:

    • The code defines a basic MainActivity class that extends AppCompatActivity.
    • In the onCreate method, it uses setContent to set the composable content for the activity. This content is defined in the MainContent composable function.

  2. Main Content Composable:

    • The MainContent function is a composable that defines the UI structure of the screen.
    • It uses a Column layout to arrange elements vertically with padding around it.

  3. Managing User Input:

    • Inside the Column, a state variable named textState is created using remember composable. This variable holds the current text entered by the user as a TextFieldValue object.

  4. Creating the Text Field:

    • A TextField composable is used to create the input field.
    • It takes three main arguments:
      • value: This is set to the current state of textState.
      • onValueChange: This defines a callback function that gets called whenever the user changes the text in the field. The function updates the textState with the new entered text.
      • label: This sets the label displayed above the text field, which is "Input Name" in this example.

  5. Displaying Input:

    • A Text composable is used below the TextField to display the entered text. It retrieves the text from textState.value.text and displays it with a red color and monospace font.

  6. Preview:

    • The ComposablePreview function allows for a preview of the composable UI in Android Studio's layout preview window. While commented out in this example, it can be used to see the UI without running the app.

Summary

This example showcases the basic functionalities of TextField in Jetpack Compose. It demonstrates how to capture user input, manage the state of the input, and display the entered text on the screen. You can further customize the TextField with additional features like password masking, keyboard options, and visual transformations for specific use cases.


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.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.font.FontFamily
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("Input Name") }
            )

            Text(
                text = "You inputted : " + textState.value.text,
                fontSize = 20.sp,
                color = Color.Red,
                fontFamily = FontFamily.Monospace
            )
        }
    }


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