Lot of things missing in `TextField` compare to `EditText` Material. Some basic things should be pro...

# compose

[Ketan]

Lot of things missing in TextField compare to EditText Material. Some basic things should be provided to style the look and feel.

[Zach Klippenstein (he/him) [MOD]]

Well it is still in alpha.

[Neil]

Maybe take a look at the Jetsurvey sample app.

[Ketan]

So in on-going development, at later stage can we expect some stying features for TextField? Is it in roadmap? @Zach Klippenstein (he/him) [MOD]

[Zach Klippenstein (he/him) [MOD]]

I don’t know what the roadmap is, but TextField (text editing in general) is probably one of the most complicated parts of any UI framework and it’s been under very heavy development for months, and i expect will continue to be until it reaches feature parity with the existing text input stuff.

https://lord.io/blog/2019/text-editing-hates-you-too/

[Sean McQuillan [G]]

The TextField APIs are something that we know are not fitting every use case now and as Zach said it's definitely the hardest part of the UI toolkit (UI toolkit by loc: 95% text 5% everything else 🙂 ).

I'd love to hear more about what you expected to find.

[Ketan]

@Sean McQuillan [G] Basic things like to set the color of the line, If error text component is provided then to set the color of the error [I know we can specify the Error and onError colors in Theme but what if the error color in particular use case is different from that theme color.

Like in Material EditText, we have everything, we just need to pass correct reference [color] to customise the experience as per our need…
I hope this will help you…

[Sean McQuillan [G]]

cc @Siyamed ^

[Siyamed]

@Ketan if you can set the error colors in theme, you can wrap the textfield and use the same structure for that specific TextField

[Siyamed]

Same structure meaning ambients

[Siyamed]

Does material edit text provide setters getters for those colors?

[Siyamed]

One of the challenges is the number of co configuration options for each of our ui components gets really really big which ends up functions with far too mamy parameters

[Siyamed]

For the material text field component styling cc: @Anastasia [G]

[Ketan]

@Siyamed I am setting the error color as stated here: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1599469564125200?thread_ts=1599201388.495500&cid=CJLTWPH7S but I am asking that in one of the use case if I need to use different color for error so in that case how can I set?

I can understand on https://kotlinlang.slack.com/archives/CJLTWPH7S/p1599610863263100?thread_ts=1599201388.495500&cid=CJLTWPH7S

Thanks @Zach Klippenstein (he/him) [MOD] @Sean McQuillan [G] @Siyamed for the inputs

[Anastasia [G]]

I might have misunderstood your use case but TF has an ‘errorColor’ parameter.
As for the bottom indicator, we’re looking towards making it more customisable.

Please feel free to file a feature request. Such requests definitely help us understand which use cases we haven’t covered

[Ketan]

@Anastasia [G] I am glad you guys are considering the TextField bottom line color customisation… I hope it turns out well
Thank you so much

P.S: Here you can check the dark theme screenshot https://kotlinlang.slack.com/archives/CJLTWPH7S/p1599201216493500 to refer why I asked for that customisation? [Bottom line is not visible]

[coolchandrakumar]

In another perspective, I am trying to put EditText using AndroidView. In that case may I reuse the Compose color palate to the EditText widget. Any possibility of setting style/color using compose color palate @Zach Klippenstein (he/him) [MOD] @Andrey Kulikov

[Zach Klippenstein (he/him) [MOD]]

Sure, just read the colors from the MaterialTheme, convert the colors to Android color ints, and set the appropriate color values on the EditText.

[coolchandrakumar]

Though MaterialTheme.colors is a composable, I can not it use it directly. Do I need to write a separate parser, prepare the colors and then use it. In my understanding default theme/style attributes doesn’t override the compose color right.

[coolchandrakumar]

If i use CheckBox widget, i need to set all color list programatically then

[Zach Klippenstein (he/him) [MOD]]

Though MaterialTheme.colors is a composable, I can not it use it directly.

What do you mean by “use it directly”?

There’s no automatic wiring of android theme colors to compose theme colors or vice versa, no.

[coolchandrakumar]

@Composable
    private fun androidViewColor() {
        MaterialTheme(colors = themeColor) {
            AndroidView(viewBlock = { context ->
                android.widget.EditText(context).apply {
                    layoutParams = LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.MATCH_PARENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT
                    )
                    setText("HelloWorld")
                    //setBackgroundColor(android.graphics.Color.BLUE)
                    //ThisPart
                    //setBackgroundColor(android.graphics.Color.parseColor("#${MaterialTheme.colors.background.value}"))
                }
            })
        }}

[Zach Klippenstein (he/him) [MOD]]

First of all, you shouldn’t be setting any properties of your android view in viewBlock that are derived from data in the composition that could change. That’s what the update block is for. The update block will be re-invoked when the composable needs to be recomposed, e.g. if the theme changes, where as the viewBlock will only be executed once to create the view.

[Zach Klippenstein (he/him) [MOD]]

I think Compose’s Color.toArgb() returns a color int in the same format that Android’s Color class expects, you don’t need to do the intermediate string.

[Zach Klippenstein (he/him) [MOD]]

You also don’t need the MaterialTheme {} wrapper, since you’re not using any components that read the theme ambient.

[Zach Klippenstein (he/him) [MOD]]

So i think this might work:

@Composable fun androidViewColor() {
  val themeColors = MaterialTheme.colors
  AndroidView({ EditText(it).apply {
    layoutParams = … 
    setText("HelloWorld")
  }}) {
    setText("HelloWorld")
    setBackgroundColor(themeColors.background.toArgb())
  }
}

[coolchandrakumar]

I have custom color set, so used material theme wrapper whether android classic views will use or not. That is clarified now.

[coolchandrakumar]

Using EditText getting trouble in Huawei P30 lite device. also crash happens when delete text

editText_compose_crash.mp4

[Zach Klippenstein (he/him) [MOD]]

I don't see a crash there, although the view doesn't seem to be updating. Can you post a stacktrace?

[coolchandrakumar]

>the view doesn't seem to be updating.
That is the issue. Check attachment for crash

SVID_20200916_114409_1.mp4

[coolchandrakumar]

>the view doesn’t seem to be updating.
It might be device specific. edit text gets updated in emulator


2020-09-17 100513.328 23364-23364/com.chan.composetryout E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.chan.composetryout, PID: 23364
java.lang.IllegalStateException: KeyEvent can’t be processed because this key input node is not active.
at androidx.compose.ui.input.key.KeyInputModifier.processKeyInput(KeyInputModifier.kt:62)
at androidx.compose.ui.platform.AndroidComposeView.sendKeyEvent(AndroidComposeView.kt:192)
at androidx.compose.ui.platform.AndroidComposeView.dispatchKeyEvent(AndroidComposeView.kt:196)

composeEditTextError.rtf