Jetpack compose: Searchbar not overlapping with the bottom of the image

Question

I'm trying to make it so the half of the search bar is overlapping with the bottom part of the image but what's happening is the search bar is stuck on the top of the screen

@Composable
fun Home(
    navController: NavController,
    authViewModel: AuthViewModel,
) {
    val authState = authViewModel.authState.observeAsState()

    LaunchedEffect(authState.value) {
        when (authState.value) {
            is AuthState.Unauthenticated -> navController.navigate(Screen.LoginScreen.route)
            else -> Unit
        }
    }

    Scaffold {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(150.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.banner),
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.FillBounds
            )
            SearchBar(
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter)
                    .offset(y = 20.dp)
            )
        }

        LazyColumn(modifier = Modifier.padding(it)) {
        }
    }

    /*
    Column {
        Button(onClick = { authViewModel.signout() }) {
            Text("Sign-out")
        }
    }*/
}

@Composable
fun SearchBar(
    modifier: Modifier
){
    var text by remember { mutableStateOf("")}
    var active by remember{ mutableStateOf(false)}
    var items = remember { mutableStateListOf("")}

    SearchBar(
        modifier = Modifier.fillMaxWidth().padding(start = 15.dp, end = 15.dp),
        query = text,
        onQueryChange = {text = it},
        onSearch = {
            items.add(text)
            active = false
            text = ""
                   },
        active = active,
        onActiveChange = {active = it},
        placeholder = {Text("Search Restaurant...")},
        leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null)},
        trailingIcon = {
            if(active){
                Icon(
                    modifier = Modifier.clickable {
                        if(text.isNotEmpty()){
                            text = ""
                        }else{
                            active = false
                        } },
                    imageVector = Icons.Default.Close,
                    contentDescription = null
                )
            }
        }
    ) {
        items.forEach {
            Row(modifier = Modifier.padding(14.dp)) {
                Icon(
                    modifier = Modifier.padding(end = 10.dp),
                    imageVector = Icons.Default.History,
                    contentDescription = null
                )
                
                Text(text = it)
            }
        }
    }
}

I tried using offset, padding, using align bottom center but the search bar is just not moving from the top of the page Here is the result: (https://i.sstatic.net/kuzCNyb8.png)

Here is what I want: (https://i.sstatic.net/7x7zh4eK.png)

Answer 1

I tried using Alignment.BottonCenter and removing offset. It works on me. I achieved exactly what you want.

Here is the code.

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(150.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillBounds
        )
        SearchBar(
            ...
            modifier = Modifier
                .padding(20.dp)
                .height(40.dp)
                .fillMaxWidth()
                .align(Alignment.BottomCenter),
            shape = RectangleShape
        ) {
        }
    }