Search code examples
androidandroid-jetpack-composewear-oscompose-wear

Problem with BasicTextField in Jetpack Compose on Wear OS


I'm new in Compose and I'm having a problem with input text field on Wear OS. The problem is that I can't get soft keyboard to work as it usually does on Android. Also, when I tried to implement the same layout in XML - it worked. So, when I tap on input text field the keyboard pops up and then hides. When I tap again - keyboard pops up and stays open, but if I try to enter any text - nothing appears in the input field (on the keyboard itself), although entered text is passing down to input text field on UI.

Here is what I get in logs on emulator when I tap on input text field to open the keyboard:

2021-11-24 09:44:36.569 W/IInputConnectionWrapper: getTextBeforeCursor on inactive InputConnection
2021-11-24 09:44:36.571 W/IInputConnectionWrapper: getTextAfterCursor on inactive InputConnection
2021-11-24 09:44:36.649 W/RecordingIC: requestCursorUpdates is not supported

Here is what I get on real device:

2021-11-24 09:35:39.783 W/IInputConnectionWrapper: getExtractedText on inactive InputConnection
2021-11-24 09:35:39.872 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: setComposingRegion on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection
2021-11-24 09:35:39.873 W/IInputConnectionWrapper: getExtractedText on inactive InputConnection
2021-11-24 09:35:39.882 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.883 W/IInputConnectionWrapper: getTextBeforeCursor on inactive InputConnection
2021-11-24 09:35:39.884 W/IInputConnectionWrapper: getTextAfterCursor on inactive InputConnection
2021-11-24 09:35:39.888 W/IInputConnectionWrapper: getSelectedText on inactive InputConnection
2021-11-24 09:35:39.890 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection
2021-11-24 09:35:39.891 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.891 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection
2021-11-24 09:35:39.891 W/IInputConnectionWrapper: beginBatchEdit on inactive InputConnection
2021-11-24 09:35:39.891 W/IInputConnectionWrapper: endBatchEdit on inactive InputConnection

And here is my 'composable':

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun ActivationScreen() {

    var key by remember { mutableStateOf("") }

    var isReady by remember {
        mutableStateOf(false)
    }

    Column(modifier = Modifier
        .padding(40.dp)
        .fillMaxSize()
    ) {
        val keyboardController = LocalSoftwareKeyboardController.current
        val focusRequester = FocusRequester()
        BasicTextField(
            value = key,
            onValueChange = {
                //isReady = it.length>11
                key = it
            },
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(
                onDone = {
                    keyboardController?.hide()
                }
            ),
            modifier = Modifier
                .size(140.dp, 20.dp)
                .background(Color.White)
                .align(Alignment.CenterHorizontally)
                //.focusRequester(focusRequester)
                //.focusOrder(focusRequester)
        )

        Text(
            text = "ACTIVATION",
        )

        val status = if (isReady) "READY" else "NOT READY"
        Text(
            text = status,
        )
    }
}

Solution

  • You should avoid text input on Wear, but if you do really need it, the GBoard activity is the best way to activate.

    See https://developer.android.com/reference/androidx/wear/input/RemoteInputIntentHelper.Companion#createActionRemoteInputIntent()

    @Composable
    fun TextInput() {
      val label = remember { mutableStateOf("Start")}
      val launcher =
        rememberLauncherForActivityResult(ActivityResultContracts.StartActivityForResult()) {
          it.data?.let { data ->
            val results: Bundle = RemoteInput.getResultsFromIntent(data)
            val ipAddress: CharSequence? = results.getCharSequence("ip_address")
            label.value = ipAddress as String
          }
        }
      Column() {
        Spacer(modifier = Modifier.height(20.dp))
        Chip(
          label = { Text(label.value) },
          onClick = {}
        )
        Chip(
          label = { Text("Search with specific IP") },
          onClick = {
            val intent: Intent = RemoteInputIntentHelper.createActionRemoteInputIntent();
            val remoteInputs: List<RemoteInput> = listOf(
              RemoteInput.Builder("ip_address")
                .setLabel("Manual IP Entry")
                .wearableExtender {
                  setEmojisAllowed(false)
                  setInputActionType(EditorInfo.IME_ACTION_DONE)
                }.build()
            )
    
            RemoteInputIntentHelper.putRemoteInputsExtra(intent, remoteInputs)
    
            launcher.launch(intent)
          }
        )
      }
    }
    

    Note: As @TiagoPeresFrança mentioned in the comments:

    In order to use wearableExtender, you must be on version 1.2.0+ of the wear-input dependency. As of today, version 1.2.0-alpha02 should be used. In your app gradle file, make sure you have as dependency implementation 'androidx.wear:wear-input:1.2.0-alpha02'.