DEV Community

Cover image for How to create Jetpack compose textfield
rrtutors
rrtutors

Posted on • Originally published at rrtutors.com

How to create Jetpack compose textfield

Jetpack Compose Tutorial Textfield in Android application. TextField can be used to insert text. This is the equivalent to EditText from the Android View system.

Different types of textfield

Filled
Outlined
Enter fullscreen mode Exit fullscreen mode

Here Read all about Textfield

  • A simple Textfield

  • Handle changes to a TextField

  • Set place holder in TextField

  • keyboard Options
  • A simple Textfield

    @Composable
    fun TextFieldDemo() {
        Column(Modifier.padding(16.dp)) {
            val textState = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                value = textState.value,
                onValueChange = { textState.value = it }
            )
        }
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Jetpack Cmpose Textfield

    Handle changes to a TextField

    In some cases, it’s useful to get the value of a textfield every time the text in a text field changes. For example, you might want to build a search screen with autocomplete functionality where you want to update the results as the user types.Here is an example how you can do it with Compose

    @Composable
    fun TextFieldDemo() {
        Column(Modifier.padding(16.dp)) {
            val textState = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                value = textState.value,
                onValueChange = { textState.value = it }
            )
            Text("The textfield has this text: " + textState.value.text)
        }
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Set place holder in TextField

    TextField(
        // below line is used to get
        // value of text field,
        value = textState.value,
        // below line is used to get value in text field
        // on value change in text field.
        onValueChange = { textState.value = it },
        // below line is used to add placeholder
        // for our text field.
        placeholder = {
            Text(text = "Enter something")
        },
    )
    
    Enter fullscreen mode Exit fullscreen mode

    Jetpack compose Textfield

    Read more about Jetpack Compose Textfield

    Discussion (0)