I want to customize TextField
composable in Jetpack Compose. I am trying to achieve the result in the image below, but somehow TextField
has some default paddings which i couldn't find how to change values of. I want to remove default paddings and customize it
(The image on the right one is the result i achieved. I drew a border so that you can see it has padding, btw below that TextField
are just Text
composables, they aren't TextFields
)
Below is my TextField
code
TextField(
value = "",
onValueChange = {},
modifier = Modifier
.weight(1F)
.padding(0.dp)
.border(width = 1.dp, color = Color.Red),
placeholder = {
Text(
"5555 5555 5555 5555", style = TextStyle(
color = Color.Gray
)
)
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent
),
)
You can use BasicTextField
, it's a plain text field without any decorations. Note that it doesn't have placeholder/hint too, you have to implement those by yourself if you need.
BasicTextField(value = "", onValueChange = {}, Modifier.fillMaxWidth())
Since 1.2.0-alpha04 it's much easier to make your BasicTextField
look like TextField
or OutlinedTextField
. You can copy source code of TextField
, which is pretty short since most of logic was moved into TextFieldDefaults.TextFieldDecorationBox
, and pass the needed padding value into contentPadding
parameter of TextFieldDefaults.TextFieldDecorationBox
.