I’m trying to adjust the `TextField` size so it’s ...

# compose

[zalewski.se]

I’m trying to adjust the TextField size so it’s adjusting to the size of the text that’s currently set. I thought that wrapContentSize() would do the job but I couldn’t be more wrong 😬
So having this:

TextField(
        modifier = Modifier.wrapContentSize(),
        textStyle = TextStyle(textAlign = TextAlign.End),
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )

Gave me such result in preview 👇 which arises 2 questions:
1. Why TextAlign.End set it around 40% of the width and what is the empty space behind it?
2. Why Modifier.wrapContentSize() doesn’t wrap it around the value or label at least? 🤔

[Siyamed]

The padding is a known issue which is recently fixed but probably not a part of beta4

[Siyamed]

I didnt understand the wrap completely, but material text field has a default min width in dp

[Siyamed]

I think it was 260dp or something like that

[zalewski.se]

As for the wrap, I’m trying to get something like this:

[zalewski.se]

260dp seems a lot for min width 😅. So is there any way to calculate the width based on the content?

I also tried with:

Modifier.defaultMinSize(minWidth = 0.dp).wrapContentSize()

but no luck 😕

[Siyamed]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]n/kotlin/androidx/compose/material/TextFieldDefaults.kt;l=141

[Siyamed]

280.dp

[Siyamed]

calculating based on content:

[Siyamed]

it is hard to define content there

[Siyamed]

TextField has error messages, label (and some more that I do not know)

[Siyamed]

@Anastasia [G] for more details but maybe what you need is to use BasicTextField?

[Sean McQuillan [G]]

Yea, if you're trying to build a design that's different than the stock Material, it's better to start from BasicTextField

[zalewski.se]

That makes sense! Thank you for detailed answers 🙏, will try with BasicTextField

[Anastasia [G]]

About TextField sizing, we set minimum width 280 dp which is overridable. If you tell us that minimum width is anything more than 0, then we use it and don’t apply 280 dp.
So you should be able to achieve your behaviour if you do sizeIn(minWidth = 5.dp). If it doesn’t work this way, then it is a bug.

[Anastasia [G]]

@Siyamed Can we wrap the content with the BasicTextField though? Don’t we always require 10 characters minimum width?

[Anastasia [G]]

Looks like BasicTextField("a", {}, Modifier.background(Color.LightGray)) will appear wider than ‘a’ character which is probably not what we want

[zalewski.se]

@Anastasia [G]
So I did some digging and in the TextFieldDelegate.kt there is:

internal const val DefaultWidthCharCount = 10 // min width for TextField is 10 chars long

In my case it looks more like 12 chars (but maybe depends on the font).
So, does it work as expected or maybe I should raise it as a bug somewhere? I was able to achieve it with the old fashioned style EditText (like in my screenshots here) so I hope it’s not gonna be Compose TextField limitation 😅

[Siyamed]

12 chara vs 10 chars --> H vs i
Depends on which chars you use

[Siyamed]

I am not sure what limitation is

[Siyamed]

If you set it to wrap content, will you provide a min width? Because otherwise it wouldn't be visible

[Siyamed]

As far as i remember the min 10 char is applied when there is no other data.

[Siyamed]

You can calculate a char length, set the length to a char, and when there are 2 chars, recalculate and set the width again

[zalewski.se]

I tried to provide minWidth, set it to wrapContent, etc but it never can wrap around 1 or 2 char, it’s always wider

[Siyamed]

A ticket/bug sounds good which will let us investigate and discuss further.

[Siyamed]

Did you try what Anastasia mentioned? SizeIn()?

[Siyamed]

(actually maybe size in is not what you look for i am not sure).

[zalewski.se]

calculate a char length

Would probably work as if I specify exact width it’s the view is adjusting it’s size correctly

[Siyamed]

If you can share the images, use case,the expectation and what you tried in the ticket i would appreciate

[Siyamed]

What i wonder is though, do you want the TextField to be 0 width when user deletes rhe characters?

[zalewski.se]

@Siyamed
SizeIn() doesn’t work as it keeps the min width = 10 char

[Siyamed]

Ticket :) 🤷

[zalewski.se]

So for now the only way I could see it working is to calculate how many dp would take my string and apply it to the width directly 🙂 (will try to check it tomorrow actually)

[zalewski.se]

Just for the reference, ticket was already created, just updated it a little.
https://issuetracker.google.com/issues/178945145