https://kotlinlang.org logo
#compose
Title
# compose
b

brandonmcansh

07/08/2021, 5:52 PM
Has anyone been able to use Composables within a TextField? Looking to replace our Chips InputView edittext with compose
👍 1
annotatedString only allows text/char from what I can tell. and TextField doesn’t have a
content
to implement
c

Chris Sinco [G]

07/08/2021, 5:55 PM
If you mean to modify the content of a TextField, one can always use
BasicTextField
to fully customize it: https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#BasicTextField(androidx.[…]s.Brush,kotlin.Function1)
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 5:55 PM
It might be easier to create something that looks like a TextField but can hold arbitrary composables, and place TextFields where you actually want there to be cursors. Of course, making selection work between text and chips would probably be complicated and idk if it’s even possible.
c

Chris Sinco [G]

07/08/2021, 5:55 PM
But by default,
TextField
and
OutlinedTextField
don’t have content params because they are designed to the Material Design spec
b

brandonmcansh

07/08/2021, 5:56 PM
yep makes sense; was checking out BasicTextField after I sent that 🙂
👍 1
onTextLayout looks helpful
and transformations
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 5:57 PM
curious to see what you come up with, i think i very much misunderstood your question lol
b

brandonmcansh

07/08/2021, 6:05 PM
i’m curious too
reading up on AnnotatedString to see how I can use custom composable for a SpanStyle
maybe
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 6:08 PM
You can’t. SpanStyle and ParagraphStyle are only for styling font things
b

brandonmcansh

07/08/2021, 6:08 PM
yeah seeing that
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 6:08 PM
The only way to so something like what you’re asking would be with
inlineContent
, but that seems to be only a
Text
thing, not
TextField
b

brandonmcansh

07/08/2021, 6:09 PM
yep
have an idea how to possibly do this
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 6:09 PM
And it requires knowing the size of each piece of content before composing it, which is awkward for things like chips which could be any size
b

brandonmcansh

07/08/2021, 6:09 PM
not as elegant as I was hoping
b

brandonmcansh

07/08/2021, 6:09 PM
yep
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 6:10 PM
You could put a TextField at the end of a
FlowRow
of chips, intercept backspace/arrow keys to “select” chips, etc
b

brandonmcansh

07/08/2021, 6:10 PM
ooo wait
may have found something
👀 1
AnnotatedString.Builder.appendInlineContent
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 6:16 PM
Yea, that’s for
BasicText
only though, and you have to define the placeholder sizes before composing them
I tried to hack something to try to do dynamic sizing here, but it is very hacky and lags by a frame, and again only good for
BasicText
not text fields
b

brandonmcansh

07/08/2021, 6:19 PM
damn
a

Adam Powell

07/08/2021, 6:26 PM
This is one area where I'd really like to expand what you can do with focus and soft keyboard interactions while representing the actual displayed content with whatever arbitrary stuff you could come up with
🦜 3
b

brandonmcansh

07/08/2021, 6:27 PM
yeah there is a lot of cool things that could be done with that foundation
probably gonna roll with the FlowRow impl for now; that’s essentially what I’m doing currently when boiled down (currently subclassing TextInputEditText and chipping text on terminators replacing them with ChipDrawables with edit/remove support)
l

lhwdev

07/09/2021, 7:58 AM
If you want to just use material text field decoration(not ime and text editing things), you can use this: https://gist.github.com/lhwdev/1eb4955f32c5d8986965b80b025f01a1 I used this to implement material dropdown. Most things are copy-pasted from compose material source code.
b

brandonmcansh

07/10/2021, 3:01 AM
Nice thanks. I kind of have something shaping up similarly so I'll definitely use this as cross ref
3 Views