custom textfield jetpack compose, I do not know how to do with Textfield

Question

I tried to design this

But I do not know how to do it with Textfield in jetpack compose

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented May 5, 2022 at 19:30

nglauber · Accepted Answer · 2022-05-05 19:52:58Z

Since you need a custom TextField which is not following the Material Design, you should use a BasicTextField and customize it as you want (you need to check the parameters for that).

Here is just a start point for your implementation...

@Composable fun CustomTextField() { var text by remember { mutableStateOf("") } Card(Modifier.fillMaxWidth()) { Row( Modifier .height(IntrinsicSize.Min) ) { Icon( imageVector = Icons.Default.Search, contentDescription = null, modifier = Modifier.padding(8.dp) ) BasicTextField( value = text, onValueChange = { text = it }, Modifier .weight(1f) .padding(8.dp) ) Box( Modifier .padding(vertical = 2.dp) .width(1.dp) .fillMaxHeight() .background(MaterialTheme.colors.onBackground.copy(alpha = .5f)) ) Icon( imageVector = Icons.Default.Settings, contentDescription = null, modifier = Modifier.padding(8.dp) ) } } }

Here is the result:

Collectives™ on Stack Overflow

custom textfield jetpack compose, I do not know how to do with Textfield

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related