Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)
    },
}
like image 601
raimund89 Avatar asked Jan 03 '20 17:01

raimund89


People also ask

How to align Text in Jetpack Compose?

If you want to set manually the text alignment of a Text composable, prefer using TextAlign. Start and TextAlign. End instead of TextAlign. Left and TextAlign.

How do I change font size in compose?

To change font size of Text composable in Android Jetpack Compose, pass a required font size value for the optional fontSize parameter of Text composable. Make sure to import sp , as shown in the above code snippet, when you are assign fontSize property with scale-independent pixels.


1 Answers

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

TextField(
    ...,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences)
)
like image 53
CyrilFind Avatar answered Sep 18 '22 17:09

CyrilFind