Change the radius of the border for OutlinedTextField

Question

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.

Gabriele Mariotti · Accepted Answer · 2022-05-07T12:38:36.567

29

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

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

edited May 07 '22 at 12:38

answered Jun 21 '21 at 07:36

Gabriele Mariotti

320,139
94
887
841

1

I've seen `.clip(RoundedCornerShape())` being used in many examples. I guess that approach is still valid as long as you keep containerColor and all BorderColor(s) the same. – Pitos Jan 02 '23 at 23:57
@Pitos It is not the same. The `modifier` is applied to the `BasicTextField` while the `shape` is applied to the `decorationBox` – Gabriele Mariotti Jan 03 '23 at 19:19

score 3 · Answer 2 · answered Oct 21 '22 at 12:41

You can use shape for this. please refer below code

OutlinedTextField(
                    value = email, onValueChange = {
                        email = it
                    },
                    label = {
                        Text(text = "Round corner", color = PrimaryColor)
                    },
                    shape = RoundedCornerShape(25.dp),

                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 20.dp)
                        .padding(top = 10.dp),
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        unfocusedBorderColor = PrimaryColor,
                        textColor = PrimaryColor),

score -2 · Answer 3 · answered Jun 21 '21 at 06:32

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.

Change the radius of the border for OutlinedTextField

3 Answers3