Jetpack Compose TextField Focus Listener Events

Published November 11, 2021

In this Jetpack compose tutorial we will cover how to handle TextField Focus Listener events. Here i have created a OutlinedTextField compose and two buttons to set focus and remove focus of the TextField. Set TextField Focus dynamically on Button Events.

To handle the focus listener of the TextField we will apply the onFocusChanged() compose listener from the Modifier class

Modifier.onFocusChanged(
        onFocusChanged: (FocusState) → Unit
)

In this TextField Focus listener example we used below compose functions

```
Column
```
```
Modifier
```
```
Text
```
```
OutlinedTextField
```
```
Row
```
```
Button
```

Create a FocusRequester instance and add this instance to the TextField Modifier

val focusRequester = FocusRequester()

modifier = Modifier
    .focusRequester(focusRequester)

Set TextField Focus Dynamically

Set Focus for the TextField

Button(onClick = {
    focusRequester.requestFocus()
})

Jetpack Compose TextField Focus Listener

Remove the Focus

Button(onClick = {
    localFocusManager.clearFocus()
})

Jetpack Compose Remove Focus from the Textfield

Let's add below code in your compose activity

package com.rrtutors.compose_maps

import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement.SpaceEvenly
import androidx.compose.material.Button
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.HorizontalAlignmentLine
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun MainContent(){
    Column(
        Modifier
            .background(Color(0xFFEDEAE0))
            .fillMaxSize()
            .padding(32.dp),
        verticalArrangement = Arrangement.spacedBy(24.dp)
    ) {
        var textState by remember { mutableStateOf(TextFieldValue()) }
        var focusState by remember { mutableStateOf("") }

        val localFocusManager = LocalFocusManager.current
        val focusRequester = FocusRequester()

        Text(
            text = focusState,
            fontSize = 22.sp,
            fontFamily = FontFamily.Monospace,
            color = Color(0xFF0047AB)
        )

        OutlinedTextField(
            value = textState,
            onValueChange = { textState = it },
            label = { Text(text = "Input your name") },
            modifier = Modifier
                .focusRequester(focusRequester)
                .fillMaxWidth()
                .onFocusChanged {
                    focusState = if (it.isFocused) {
                        "TextField is focused."
                    } else {
                        "TextField has no focus."
                    }
                },
        )

        Row(horizontalArrangement = Arrangement.SpaceEvenly,modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                focusRequester.requestFocus()
            }) {
                Text(text = "Set Focus")
            }

            Button(onClick = {
                localFocusManager.clearFocus()
            }) {
                Text(text = "Clear Focus")
            }
        }
    }
}


@Preview
@Composable
fun ComposablePreview(){
    //MainContent()
}

Let's call above compose function in our Compose Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeMapsTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    MainContent()
                }
            }
        }
    }
}

Run application, you can see the focus listener events on button clicks

Conclusion: In this Jetpack compose tutorial we covered TextField Focus Listener Events , set TextField Focus dynamically on button click events

Article Contributed By :

3181 Views

Projects By category