https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
t

Tobias Preuss

01/23/2023, 2:14 PM
What is the correct way to show the cursor in an 
androidx.compose.material3.OutlinedTextField
? In the following example the cursor is not visible.
Copy code
@ExperimentalMaterial3Api
@Composable
fun outlinedTextColors() = outlinedTextFieldColors(
    textColor = baseTextColor(),
    cursorColor = colorResource(android.R.color.holo_green_dark), // <---
    unfocusedBorderColor = baseTextColor(),
    unfocusedLabelColor = baseTextColor(),
    focusedLabelColor = baseTextColor(),
    placeholderColor = colorResource(R.color.tertiaryTextColor),
    focusedTrailingIconColor = baseIconColor(),
)


@ExperimentalMaterial3Api
@Composable
private fun MyOutlinedTextField(
    configuration: Configuration,
    onTextChanged: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    OutlinedTextField(
        modifier = modifier,
        label = { Text(configuration.label, subheadlineMedium) },
        value = limitedText,
        onValueChange = { onTextChanged(it) },
        textStyle = subheadlineMedium,
        colors = outlinedTextColors(), // <---
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done)
    )
}
Related: • https://github.com/material-components/material-components-android/issues/3067 • https://issuetracker.google.com/issues/240256666
@Ale Stamato Any hint here?
a

Ale Stamato

01/25/2023, 9:55 AM
Hey. Are you running latest compose UI stable and M3 or which versions?
t

Tobias Preuss

01/25/2023, 4:20 PM
1.3.2 and M3
a

Ale Stamato

01/25/2023, 7:35 PM
Cant find anything wrong with that snippet. So cursor is transparent? i assume you tried removing style subheadlineMedium? does your component work isolated in a preview? have you tried hardcoding a cursor color like
Copy code
colors = TextFieldDefaults.outlinedTextFieldColors(
            cursorColor = Color(Pink)
        ),
do u have a min repro (a small project)? I cant reproduce, locally cursorColor works fine for me (using the same system green)
t

Tobias Preuss

01/25/2023, 8:12 PM
Yes, I tried setting the 
cursorColor
explicitly.
I will double check on the style, although I think I did. I will also try to set a background color to see if the cursor is transparent it white.
If I remove even more ...
Copy code
@ExperimentalMaterial3Api
@Composable
private fun MyOutlinedTextField(
    configuration: Configuration,
    onTextChanged: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    androidx.compose.material3.OutlinedTextField(
        modifier = modifier,
        value = limitedText,
        onValueChange = { onTextChanged(it) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done)
    )
}
... the cursor still does not show up on the device. It does show up in the Android Studio Preview, though: purple color. Hardcoding the color works in the Preview, too. But not on the device.
Does the 
OutlinedTextField
pick up some theme automatically which colors the cursor? How would I know?
a

Ale Stamato

01/30/2023, 4:08 PM
just to be clear, when you say “on the device”, youre running the preview composable on the device or the app on the device
t

Tobias Preuss

01/30/2023, 4:08 PM
the app
a

Ale Stamato

01/30/2023, 4:12 PM
take a look at the 
outlinedTextFieldColors
defaults ->
Copy code
cursorColor: Color = OutlinedTextFieldTokens.CaretColor.toColor()
and then 
OutlinedTextFieldTokens
defines CaretColor = ColorSchemeKeyTokens.Primary if you do not override it, the cursor colour should be the primary defined in your material theme
t

Tobias Preuss

01/30/2023, 4:22 PM
Are you referring to 
colorPrimary
?
Copy code
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">#000</item>
    ...
</style>
a

Ale Stamato

01/30/2023, 5:50 PM
I am referring to your Compose material theme config, like:
Copy code
MaterialTheme(
    colorScheme = colorScheme,
    typography = AppTypography,
    content = content
)
then colorScheme has a primary.
t

Tobias Preuss

01/30/2023, 6:05 PM
Is setting a MaterialTheme a requirement?
a

Ale Stamato

01/30/2023, 6:38 PM
well, you can manually set styles across the app with composition locals or using style parameters, but it is easier and more consistent with a theme (like xml for views)
t

Tobias Preuss

01/30/2023, 8:26 PM
I can try to wrap the 
OutlinedTextField
into 
MaterialTheme
which I do not until now.
The alternative is to set the 
textStyle
in combination with a composition local if I understand you correctly.
a

Ale Stamato

01/31/2023, 12:39 AM
you can try with the material theme, but not sure any of this will work if setting the colour directly didn’t 😕 i think i need to see the rest of the code.
t

Tobias Preuss

02/02/2023, 11:23 AM
✅ Rubberducking with colleagues helped 🦆 I had animations turned off (for a while) in developer options 🤦 Thanks anyway!
4 Views
Powered by