TextField is an important UI element that allows users to type the text as input. Let’s learn how to add TextField in Android Jetpack Compose.
Apart from TextField composable you have to make use of state management of Jetpack Compose to add a properly working TextField. See the code snippet given below.
var textInput by remember { mutableStateOf("")}
TextField(value = textInput, onValueChange = {textInput = it})The input value of TextField is stored in textInput variable. If you find any error in Android Studio then press option + return (or alt + enter) shortcut to import getValue and setValue.
In the following code, I also added a Text composable below TextField to show the value entered in the TextField.
package com.example.example
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.example.ui.theme.ExampleTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ExampleTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
TextfieldExample()
}
}
}
}
}
@Composable
fun TextfieldExample() {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
var textInput by remember { mutableStateOf("")}
TextField(value = textInput, onValueChange = {textInput = it})
Text(text = textInput)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ExampleTheme {
TextfieldExample()
}
}See the output of the above example code.
That’s how you add TextField in Android Jetpack Compose.
