How can i make this custom text search field in jetpack compose?

Question

I want this search bar.

Expected : -

I tried the below code but it's not working as expected.

Achieved: -

    Row(
        horizontalArrangement = Arrangement.SpaceBy,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
                .width(width = 277.dp)
                .height(height = 38.dp)
                .padding(end = 12.dp)
        ) {
        Image(
            painter = painterResource(id = R.drawable.elogo),
            contentDescription = "e logo",
            modifier = Modifier
                        .size(size = 46.dp))
        TextField(
            value = "",
            onValueChange = {})
        Image(
            painter = painterResource(id = R.drawable.vector),
            contentDescription = "Vector",
            alpha = 0.5f,
            modifier = Modifier
                        .width(width = 19.dp)
                        .height(height = 19.dp))
        }

I need circled corners along with the two logos at both the ends.

Ia the image what you want or what you tried to achieve? Please post images of what you have tried and what you desire. — tomerpacific, Feb 23 '23 at 06:05

Jayant Kumar · Accepted Answer · 2023-02-24T04:40:36.307

You can do like this , first create custom search view

    @Composable
    fun CustomSearchView(
        search: String,
        modifier: Modifier = Modifier,
        onValueChange: (String) -> Unit
    ) {
    
        Box(
            modifier = modifier
                .padding(20.dp)
                .clip(CircleShape)
                .background(Color(0XFF101921))
    
        ) {
            TextField(value = search,
                onValueChange = onValueChange,
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color(0XFF101921),
                    placeholderColor = Color(0XFF888D91),
                    leadingIconColor = Color(0XFF888D91),
                    trailingIconColor = Color(0XFF888D91),
                    textColor = Color.White,
                    focusedIndicatorColor = Color.Transparent, cursorColor = Color(0XFF070E14)
                ),
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                trailingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                placeholder = { Text(text = "Search") }
            )
        }
    
    }

Now use where ever you want like this ...

@Composable
fun Demo() {
    var search by remember { mutableStateOf("") }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0XFF070E14))
    ) {
        CustomSearchView(search = search, onValueChange = {
            search = it
        })
    }

}

Result

score 1 · Answer 2 · answered Feb 23 '23 at 06:23

val (value, onValueChange) = remember { mutableStateOf("") }

TextField(
    value = value,
    onValueChange = onValueChange,
    textStyle = TextStyle(fontSize = 17.sp),
    leadingIcon = { Icon(Icons.Filled.Search, null, tint = Color.Gray) },
    modifier = Modifier
        .padding(10.dp)
        .background(Color(0xFFE7F1F1), RoundedCornerShape(16.dp)),
    placeholder = { Text(text = "Bun") },
    trailingIcon = {
        Icon(
            Icons.Filled.Search,
            null,
            tint = Color.Gray,
            modifier = Modifier.clickable { /*Click Action*/ })
    },
    colors = TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        backgroundColor = Color.Transparent,
        cursorColor = Color.DarkGray
    )
)

score 1 · Answer 3 · answered Feb 23 '23 at 06:27

The TextField composable has several properties which you can use (so there is no need to create a custom layout like you did):

LeadingIcon
TrailingIcon
Shape (for rounded corners)

An example would look like this:

              Row {
                    TextField(
                        value = text,
                        onValueChange = {  },
                        leadingIcon = Icon(
                            painter = painterResource(id = R.drawable.elogo),
                            contentDescription = "Leading",
                            modifier = Modifier
                                .size(size = 46.dp)
                        ),
                        trailingIcon = Icon(
                            painter = painterResource(id = R.drawable.vector),
                            contentDescription = "Trailing",
                            modifier = Modifier
                                .width(width = 19.dp)
                                .height(height = 19.dp)
                                .alpha(0.5f)),
                        shape = RoundedCornerShape(8.dp)
                    )
                }

You can read more in the documentation.

How can i make this custom text search field in jetpack compose?

3 Answers3