Example of new Focus API of JetPack Compose beta version

new_focus_api_compose.kt

@OptIn(ExperimentalComposeUiApi::class)
    @Composable
    private fun Content() {

        val isTopMessageVisible = remember { mutableStateOf(true) }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp)
        ) {

            TopMessage(isTopMessageVisible.value)

            val focusManager = LocalFocusManager.current
            val (userPhone, email, rewardsNumber) = FocusRequester.createRefs()

            val text1 = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .focusOrder(userPhone) { next = email },
                value = text1.value,
                onValueChange = { text1.value = it },
                label = {
                    Text("User Phone")
                },
                singleLine = true,
                shape = RoundedCornerShape(8.dp),
                trailingIcon = { Icon(Icons.Filled.Info, "") },
                colors = TextFieldDefaults.textFieldColors(
                    textColor = Black,
                    backgroundColor = White,
                    focusedIndicatorColor = White,
                    unfocusedIndicatorColor = Gray
                ),
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Next
                ),
                keyboardActions = KeyboardActions(
                    onNext = {
                        Log.d("MainActivity", "OnNext")
                        focusManager.moveFocus(FocusDirection.Next)
                    }
                )
            )

            Spacer(modifier = Modifier.size(20.dp))

            val text2 = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .focusOrder(email) { next = rewardsNumber },
                value = text2.value,
                onValueChange = { text2.value = it },
                label = {
                    Text("Email")
                },
                singleLine = true,
                shape = RoundedCornerShape(8.dp),
                trailingIcon = { Icon(Icons.Filled.Info, "") },
                colors = TextFieldDefaults.textFieldColors(
                    textColor = Black,
                    backgroundColor = White,
                    focusedIndicatorColor = White,
                    unfocusedIndicatorColor = Gray
                ),
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Next
                ),
                keyboardActions = KeyboardActions(
                    onNext = {
                        Log.d("MainActivity", "OnNext")
                        focusManager.moveFocus(FocusDirection.Next)
                    }
                )
            )

            Spacer(modifier = Modifier.size(20.dp))

            val text3 = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .focusOrder(rewardsNumber),
                value = text3.value,
                onValueChange = { text3.value = it },
                label = {
                    Text("Number")
                },
                singleLine = true,
                shape = RoundedCornerShape(8.dp),
                trailingIcon = { Icon(Icons.Filled.Info, "") },
                colors = TextFieldDefaults.textFieldColors(
                    textColor = Black,
                    backgroundColor = White,
                    focusedIndicatorColor = White,
                    unfocusedIndicatorColor = Gray
                ),
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(
                    onDone = {
                        Log.d("MainActivity", "OnDone")
                        isTopMessageVisible.value = false
                    }
                )
            )
        }
    }

    @Composable
    private fun TopMessage(isVisible: Boolean) {
        if (isVisible) {
            Spacer(modifier = Modifier.size(20.dp))
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = "Testing new Focus API on Compose Beta",
                fontSize = 22.sp,
                textAlign = TextAlign.Center
            )
            Spacer(modifier = Modifier.size(40.dp))
        }
    }