How to enable capitalization on the virtual keyboard for an Android Compose TextField?

Question

I've recently started moving to Compose to make my UIs in Android. So far I like it, but I'm still struggling to find the right documentation sometimes. So I'm sorry if this question is very obvious!

In the app I'm currently working on, I have a TextField that is used to enter the title of a message. Everything works fine, except that the virtual (on-screen) keyboard doesn't by default enable caps lock for the first letter. Is it possible to enable caps lock on the virtual keyboard for a TextField, and if so, how? It's only necessary for the first character in the TextField (or in a sentence, it's a title field so there should only be one sentence), if a user wants to capitalize more they are welcome to do it themselves :) So what I'm basically looking for is the Compose version of the android:inputType="textCapSentences" XML-attribute of the EditText.

My code for the TextField is below. Some background in case that helps: the TextField is inside a Stack which also holds a Text. I use that to display a hint in case the TextField is empty. The Stack is inside a Column, which in it's turn is inside a VerticalScroller that wraps the whole screen. I'm using Android Studio 4.0 Canary 7.

Thanks very much in advance!

// Model saving the current state of the TextField
val modelTitle = +state{EditorModel()}
// Context (aka the Activity) necessary to get the focus and input method manager
val context = +ambient(ContextAmbient)
// Input Method Manager, to hide the keyboard
val imm = context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager

TextField {
    value = modelTitle.value,
    modifier = ExpandedWidth.wraps(Spacing(5.dp)),
    textStyle = TextStyle(
        color = Color.White,
        fontSize = 30.sp
    ),
    onValueChange = {
        modelTitle.value = it
    },
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Done,
    onImeActionPerformed = {
        // Get the view currently in focus, or make one
        var view = (context as Activity).currentFocus
        if(view == null)
            view = View(context)

        // Use the view to hide the keyboard
        imm.hideSoftInputFromWindow(view.windowToken, 0)
    },
}

Do you want text field input value to be capitalize or virtual keyword with capitalize value ? — amar_1995, Jan 07 '20 at 06:43
Ah, that's a bit ambiguous indeed :) I edited the question to make it clearer. What I would like is a behaviour similar to the XML EditText attribute `android:inputType="textCapSentences"`. So the user is still allowed to disable caps lock and start with a lower case letter, but it's not the default. Thanks! — raimund89, Jan 08 '20 at 09:23

score 27 · Answer 1 · answered Dec 22 '20 at 10:43

27

You can use keyboardOptionsand KeyboardCapitalization (FYI I'm on alpha09):

TextField(
    ...,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences)
)

answered Dec 22 '20 at 10:43

CyrilFind

634
1
7
16

score 5 · Answer 2 · answered Mar 13 '21 at 09:03

5

With the 1.0.0-beta02 you can use the keyboardOptions attribute:

   TextField(
         keyboardOptions = KeyboardOptions.Default.copy(
                capitalization = KeyboardCapitalization.Sentences)
   )

answered Mar 13 '21 at 09:03

Gabriele Mariotti

320,139
94
887
841

How to enable capitalization on the virtual keyboard for an Android Compose TextField?

2 Answers2