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

Answer 1

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: