I want to implement a row layout like this :-

and when the search field is clicked it should inflate like this:-

Now what i’m able to do is

and when it inflates

I tried changing the width and height of the searchBar but then it won’t take the whole screen when clicked.

Here’s the code….i know it’s kinda half and half but kindly help me.

Row(
                verticalAlignment = Alignment.CenterVertically
            ){

                Box(
                    modifier = Modifier
                        .requiredSize(size = 30.dp)
                        .clip(shape = CircleShape)
                ){
                    Image(
                        painter = painterResource(id = R.drawable.placeholdernew),
                        contentDescription = null,
                        modifier = Modifier
                            .width(width = 50.dp)
                            .height(height = 50.dp)
                            .clip(shape = RoundedCornerShape(8.dp))
                    )
                }
                Row(
                    modifier = Modifier.weight(0.8f),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    SearchBar(
                        query = state.searchQuery,
                        onQueryChange = { event(SearchEvent.UpdateSearchQuery(it)) },
                        onSearch = {
                            event(SearchEvent.UpdateSearchActive(false))
                        },
                        active = state.searchActive,
                        onActiveChange = {
                            event(SearchEvent.UpdateSearchActive(it))
                        },
                        placeholder = {
                            Text(text = "Search")
                        },
                        trailingIcon = {
                            if (state.searchActive) {
                                Icon(
                                    modifier = Modifier.clickable {
                                        event(SearchEvent.UpdateSearchQuery(""))
                                    },
                                    imageVector = Icons.Default.Close,
                                    contentDescription = "Close Icon"
                                )
                            }
                        }
                    ) {

                    }
                }

                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription ="settings"
                )
            }