How to add button over background image in column inJetpack Compose?

I want to add a button over the image which is at last of the column. Here is the code for my column.

Like this

        Column(
            modifier
                .fillMaxSize()
                .background(color = Background),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                painter = painterResource(id = R.drawable.e_logo),
                contentDescription = "Emporium Logo",
                modifier = modifier
                    .size(150.dp, 150.dp)
                    .padding(top = 39.dp)
            )
            Text(
                text = " ",
                color = Color.White,
                fontSize = 50.sp,
                textAlign = TextAlign.Center,
                fontFamily = Oswald,
                fontWeight = FontWeight.Bold
            )
            Divider(color = Color.White, thickness = 1.dp,
                modifier = modifier
                    .padding(
                        top = 10.dp,
                        bottom = 20.dp
                    )
                    .width(140.dp))

            Text(
                text = " ",
                color = Color.White,
                fontSize = 20.sp,
                textAlign = TextAlign.Center,
                fontFamily = Poppins,
                fontWeight = FontWeight.Normal,
            )

            Image(
                painter = painterResource(id  = R.drawable.dotted_design),
                contentDescription = "Dotted Design",
                contentScale = ContentScale.FillWidth,
                modifier = modifier
                    .fillMaxWidth()
                    .height(1000.dp)

            )
        }

Whenever i am trying to put the button above or below the background image, it is getting displaced.

>Solution :

Use a Box to put elements on top of another.

Something like:

  Box(
      contentAlignment = Alignment.Center
  ){
      Image(
         //...
      )
      Button(
          onClick = {},
          modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = xx.dp)
      ){
          Text("Connect Wallet")
      }
  }

enter image description here

Leave a Reply