is it possible to tell to a outlinedtextfield that...

# compose

[Pablo]

is it possible to tell to a outlinedtextfield that it must not increase it's width if the user writes long text? I can't set a fixed width in .dp because it must have weight(1f) due to other requirements

[Sergey Y.]

Set it to a fixed width?

[Pablo]

I can't, it must have

Modifier.weight(1f)

[Pablo]

i have two of them with other items in a flowrow, and the fields mut have weight instead of a fixed width

[Pablo]

I just require they don't grow in width the the user types text

[Matthias Reither]

The requirements don't make sense to me 🤔 weight(1f) is usually used to have an element take up all the place it can. Please correct me if I'm wrong

[Pablo]

FlowRow(
    modifier = Modifier.fillMaxWidth().padding(6.dp),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    LocationField(modifier = Modifier.weight(1f))
    LocationField(modifier = Modifier.weight(1f))
}

@Composable
fun LocationField(modifier: Modifier = Modifier) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(modifier = Modifier.weight(1f).padding(horizontal = 16.dp),)
        Row {
            IconButton() 
            IconButton() 
        }
    }
}

[Pablo]

this is a summary of what I have. LocationField is a composable with a outlinedtextfield and two icons (search and delete) in a row

[Pablo]

I need two LocationFields, but I want that when the device is in portrait, two are displayed one below the other, but when is in landscape, they are displayed one after the other in a row

[Pablo]

I achieved it with that code

[Pablo]

the issue with that code is that when the user writes, the fields enlarge and then in landscape they put one below the other like in portrait

[Pablo]

maybe now you understand the issue Matthias?

[Pablo]

I need that special behaviour because if I place one below the other in landscape, the map which is being displayed below them is too small, so I need to place them one after the other in a row if the device is landscape

[Mandeep Bhalothia]

Hi @Pablo, I also faced the same issue. Did you get any work around?

[Pablo]

nope

[Pablo]

@Matthias Reither and @Sergey Y. maybe do you have something more info about this?

[Sergey Y.]

I’ve never done anything like this before, so I’m not sure how to approach it. Maybe it won’t work without a custom layout or custom text measurements. 🤷

[Sergey Y.]

Perhaps wrapping TextInput in a layout with a custom layout block will help, or you may need to implement a custom text wrap mode where the text doesn’t affect the composable’s width.

[Matthias Reither]

Sorry for the late reply! My recommended approach would be to look into android's adaptive Libraries. With WindowSizeClasses you can adapt your UI for different screen sizes/rotations etc.
For your use case, this solution might be overkill though.
https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes

[Pablo]

but matthias, that is related to an entire screen, not to forzing a fied not increasing his size

[Pablo]

but well, finally I opted for a totally different screen

[Matthias Reither]

You could technically use the adaptive framework to check if the device is in landscape or portrait mode like this

val windowSizeClass = calculateWindowSizeClass(activity)

val isLandscape = windowSizeClass.widthSizeClass > windowSizeClass.heightSizeClass


if (isLandscape) {
    // put your landscape code here
} else {
    // put your portrait code here 
}

But as I said, this might be total overkill for you. But glad that you've found a solution that you're happy (or at least satisfied) with