'Change the radius of the border for OutlinedTextField

Is it possible to change the radius of the border of an OutlinedTextField. I want to achieve something like this

I can not use Modifier.border because it just draws border above the label. Like this

And for OutlinedTextField there is no shape parameter like it is in TextField. And If I use simple TextField I can't have label that is drawing in the top border line. The label is drawing within the TextField.

Solution 1:^[1]

You can use the shape parameter to customize the shape of the border:

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    shape = RoundedCornerShape(12.dp)
)

Solution 2:^[2]

See the recommended way of creating such custom Composables, is to copy the original Composable's implementation and modify it to suit your needs.

Shortcut: Just type Button then Ctrl + Click on it (in Android Studio). This will take you to the implementation. It is a very simple and small one so just copy it. Internally, button uses a surface to contain the elements in a rowscope, which does have a shape parameter, or you can use Modifier.clip() on it. Try it out.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Richard Onslow Roper

'Change the radius of the border for OutlinedTextField

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]