Jetpack Compose Focus Management Guide — FocusRequester, FocusManager & IME Actions

What You'll Learn

How to manage focus in Jetpack Compose — FocusRequester, FocusManager, IME actions, and keyboard dismissal.

---

FocusRequester — Auto-focus on Screen Load

@Composable
fun FocusRequestExample() {
    val focusRequester = remember { FocusRequester() }
    var text by remember { mutableStateOf("") }

    Column(Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Auto-focused field") },
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(focusRequester)
        )
        LaunchedEffect(Unit) {
            focusRequester.requestFocus()
        }
    }
}

Field-to-Field Focus Navigation

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    val passwordFocus = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current

    Column(Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Email,
                imeAction = ImeAction.Next
            ),
            keyboardActions = KeyboardActions(
                onNext = { passwordFocus.requestFocus() }
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(Modifier.height(8.dp))
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Password,
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(
                onDone = { focusManager.clearFocus() }
            ),
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(passwordFocus)
        )
    }
}

Focus State Detection

@Composable
fun FocusAwareField() {
    var text by remember { mutableStateOf("") }
    var isFocused by remember { mutableStateOf(false) }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .fillMaxWidth()
            .onFocusChanged { isFocused = it.isFocused }
            .border(
                width = if (isFocused) 2.dp else 0.dp,
                color = if (isFocused) MaterialTheme.colorScheme.primary else Color.Transparent,
                shape = RoundedCornerShape(8.dp)
            )
    )
}

Dismiss Keyboard on Outside Tap

@Composable
fun DismissKeyboardOnTap() {
    val focusManager = LocalFocusManager.current
    Box(
        Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTapGestures { focusManager.clearFocus() }
            }
    ) {
        // Your content here
    }
}

Summary

• FocusRequester to set focus on specific fields
• ImeAction.Next/Done for keyboard actions
• KeyboardActions to handle IME action events
• LocalFocusManager.current.clearFocus() to dismiss keyboard
• onFocusChanged to monitor focus state
• detectTapGestures to dismiss on outside tap

---

8 production-ready Android app templates available on Gumroad.

Browse templates → Gumroad