Develop Reference

How could i make this view like this in jetpack compose?

enter image description here
i still confused using component view in jetpack compose,
please help me for making this one. thanks
i was tried but it's not like current view in figma

Card(modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp)
.wrapContentHeight(), elevation = 8.dp,
shape = RoundedCornerShape(25.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp)
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Image(painter = painterResource(id = R.drawable.ic_points_star_icon), modifier = Modifier
.padding(vertical = 8.dp)
.size(60.dp), contentDescription = "")
Column(modifier = Modifier
.weight(1f)
.padding(vertical = 8.dp), horizontalAlignment = Alignment.Start) {
Text(text = "Heading Text", style = AppTheme.typography.boldHeaderStyle)
Text(text = "This is sample body text", color = textColor.copy(0.4f), style = AppTheme.typography.captionTextStyle)
}
Button(
onClick = { /*Your on Click*/ },
shape = RoundedCornerShape(5.dp),
elevation = ButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 0.dp,
disabledElevation = 0.dp,
hoveredElevation = 0.dp,
focusedElevation = 0.dp,
),
colors = ButtonDefaults.buttonColors(
backgroundColor = BackArrowTint.copy(0.6f),
contentColor = Color.White
),
modifier = Modifier
.wrapContentHeight()
.padding(horizontal = 4.dp),
) {
Text(
text = "Buy Ticket",
modifier = Modifier.padding(vertical = 2.dp, horizontal = 4.dp),
color = White,
style = AppTheme.typography.buttonStyle,
)
}
}
}
Sample Image:

Ovelapping icons images in compose

I want to display the icons below so the center one is overlapping.
I am trying to use the Box but not sure how to arrange them so they are overlapping and in the center of the screen.
I have started using a Box with 3 Box stacked on each other. But not sure about how to arrange them so the center slightly overlaps the left and right icons. And slightly higher.
fun SurveyIconScreen() {
Box {
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_star), contentDescription = "Star")
}
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
}
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
}
}
}

You can apply an offset modifier to overlap the icons.
Also use the zIndex(1f) modifier to drawn the icon in the center on top of all other icons.
Something like:
val shape = RoundedCornerShape(4.dp)
val borderColor = LightGray
Row(
modifier = Modifier.fillMaxWidth().height(70.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
){
Icon(Icons.Outlined.Star, contentDescription = "Star",
modifier = Modifier
.offset(x = 3.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
Icon(
Icons.Outlined.ShoppingCart,
contentDescription = "Star",
modifier = Modifier
.zIndex(1f)
.offset(y = -12.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
Icon(Icons.Outlined.Note, contentDescription = "Star",
modifier = Modifier
.offset(x = -3.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
}

How to Split screen height in half in Jetpack Compose?

I want to split my screen in half horizontally in Jetpack Compose like this:
#Composable
fun Splash(alpha: Float) {
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.cat2))
Box(
modifier = Modifier
.background(Blue)
.height(screenHeight / 2)
.padding(8.dp),
contentAlignment = Alignment.TopCenter
) {
Column() {
Text(text = "Example", fontSize = 44.sp)
}
}
Box(
modifier = Modifier
.background(Red)
.height(screenHeight / 2)
.padding(8.dp),
contentAlignment = Alignment.BottomCenter
){
Column {
Text(text = "Example", textAlign = TextAlign.End, color = Grey, fontSize = 12.sp)
}
}
}
I can get screen height with LocalConfiguration.current in dp and I set my top box and bottom box alignments as Alignment.TopCenter and Alignment.BottomCenter respectively but it didn't work. Second box(Red one) stays on top of the blue one.

You can wrap your Boxes with a Column and set Modifier.weight(1f) for each box to set both of them at same height with
#Composable
fun Splash() {
Column(modifier =Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(Blue)
.weight(1f)
.padding(8.dp),
contentAlignment = Alignment.TopCenter
) {
Column() {
Text(text = "Example", fontSize = 44.sp)
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.background(Red)
.weight(1f)
.padding(8.dp),
contentAlignment = Alignment.Center
){
Column {
Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
}
}
}
}
or wrap with a BoxWithConstraints which returns Contraints, maxWidth, maxHeight and use Modifier.align to one Box to top and other one to Bottom. BoxWithConstraints is useful for getting measurement parameters and set them as children Modifiers.
#Composable
fun Splash2() {
BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(Blue)
.height(maxHeight/2)
.align(Alignment.TopStart)
.padding(8.dp),
contentAlignment = Alignment.TopCenter
) {
Column() {
Text(text = "Example", fontSize = 44.sp)
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.background(Red)
.align(Alignment.BottomStart)
.height(maxHeight/2)
.padding(8.dp),
contentAlignment = Alignment.Center
){
Column {
Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
}
}
}
}

The simplest way to set a height equal to the half-screen height is with a fractional in the modifier.
Column(
modifier = Modifier
.padding(10.dp)
.fillMaxHeight(0.5f)
){ //Content}

The best way to implement your image is this way:
Column(
Modifier
.fillMaxSize()
.padding(8.dp)
) {
Row(
Modifier
.fillMaxWidth()
.weight(1f)
.background(Blue),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
Text(text = "Example", fontSize = 44.sp)
}
Row(
Modifier
.fillMaxWidth()
.weight(1f)
.background(Red),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
Text(text = "Example", fontSize = 44.sp)
}
}

Extra padding in HorizontalPager

I'm trying to handle Horizontal Pager but I'm having a problem with additional padding from the top. It only happens when I add HorizontalPager() to my layout.
As you can see in the attachment I have grey indicators which I want to put below my pager but when I do that Pager goes lower and indicators become invisible. It looks like HorizontalPager() has some top padding (?)
Box(
modifier = Modifier
.fillMaxWidth()
.height(350.dp)
.clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
.background(MaterialTheme.colors.onBackground)
) {
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(10.dp)
) {
val (backButton, favouriteButton, photosPager) = createRefs()
BackNavigationSingleButton(
backButtonSelected = { }, modifier = Modifier
.height(42.dp)
.width(60.dp)
.clip(RoundedCornerShape(10.dp))
.background(Color.Red)
.constrainAs(backButton) {
top.linkTo(parent.top)
start.linkTo(parent.start)
}
)
IconButton(onClick = {}, modifier = Modifier
.size(42.dp)
.constrainAs(favouriteButton) {
top.linkTo(parent.top)
end.linkTo(parent.end)
}) {
Icon(
imageVector = Icons.Outlined.Favorite
)
}
Column(
modifier = Modifier
.constrainAs(photosPager) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}) {
val pagerState = rememberPagerState()
val items = 3
HorizontalPager(
count = items,
state = pagerState,
contentPadding = PaddingValues(0.dp)
) { page ->
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Green)
)
}
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
for (i in 1..items) {
Canvas(modifier = Modifier.size(20.dp)) {
drawCircle(
color = Color.Gray,
center = Offset(x = 10f, y = 10f),
radius = size.minDimension / 4,
)
}
}
}
}
}
}

Each page inside HorizontalPager is using Modifier.fillParentMaxSize, which makes it fill all available height, same what Modifier.fillMaxHeight does.
When Column has an item with Modifier.fillMaxHeight, this item will push all next items. To prevent this you can use Modifier.weight: in this case height of this view will be calculated after all other Column children.
Also most of time ConstraintLayout is redundant in Compose, here's how you can build same layout without it:
Box(
modifier = Modifier
.fillMaxWidth()
.height(350.dp)
.clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
.background(MaterialTheme.colors.onBackground.copy(0.5f))
.padding(10.dp)
) {
Row {
TextButton(
onClick = { },
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.background(Color.Red)
) {
Text("button")
}
Spacer(Modifier.weight(1f))
IconButton(
onClick = {},
modifier = Modifier
.size(42.dp)
) {
Icon(
imageVector = Icons.Outlined.Favorite,
contentDescription = null
)
}
}
Column {
val pagerState = rememberPagerState()
val items = 3
HorizontalPager(
count = items,
state = pagerState,
contentPadding = PaddingValues(0.dp),
modifier = Modifier.weight(1f)
) { page ->
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Green)
)
}
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
for (i in 1..items) {
Canvas(modifier = Modifier.size(20.dp)) {
drawCircle(
color = Color.Gray,
center = Offset(x = 10f, y = 10f),
radius = size.minDimension / 4,
)
}
}
}
}
}
Result:

How to achieve this layout in Jetpack Compose

I'm trying to use the new Jetpack Compose UI framework, but I'm running into an issue. I'd like to achieve this layout, which in xml is pretty easy to achieve:
But I can't figure out how to make the vertical divider take up the available vertical space, without specifying a fixed height. This code that I've tried doesn't seem to work:
#Composable
fun ListItem(item: PlateUI.Plate) {
Surface(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(8.dp),
elevation = 2.dp
) {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Column(
modifier = Modifier
.padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Code")
Text(text = item.code)
}
Spacer(
modifier = Modifier
.preferredWidth(1.dp)
.background(color = MaterialTheme.colors.onSurface.copy(0.12f))
)
Spacer(modifier = Modifier.weight(1f))
Text(
modifier = Modifier
.padding(horizontal = 8.dp, vertical = 34.dp),
text = item.name
)
Spacer(modifier = Modifier.weight(1f))
}
}
}
I keep getting this result:
I also tried with ConstraintLayout, but it still didn't work
#Composable
fun ListItem(item: PlateUI.Plate) {
Surface(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(8.dp),
elevation = 2.dp
) {
ConstraintLayout(
modifier = Modifier.fillMaxWidth(),
) {
val(column, divider, text) = createRefs()
Column(
modifier = Modifier
.padding(8.dp)
.constrainAs(column){
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(parent.start)
},
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Code")
Text(text = item.code)
}
Spacer(
modifier = Modifier
.preferredWidth(1.dp)
.background(color = MaterialTheme.colors.onSurface.copy(0.12f))
.constrainAs(divider){
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(column.end)
}
)
Text(
modifier = Modifier
.padding(horizontal = 8.dp, vertical = 34.dp)
.constrainAs(text){
start.linkTo(divider.end)
end.linkTo(parent.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
},
text = item.name
)
}
}
}
But nothing seems to work. Is this a bug, a missing feature or am I just missing something?
EDIT: Apparently the real problem is that the divider doesn't know how to measure when the Surface doesn't have a fixed height, setting height equal to some number solves the issue, but then the view doesn't adapt to the content height anymore, so this can't be the solution

You can apply:
the modifier .height(IntrinsicSize.Max) to the Row
the modifiers .width(1.dp).fillMaxHeight() to the Spacer
You can read more about the Intrinsic measurements here.
Something like:
Row(
modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Max),
verticalAlignment = Alignment.CenterVertically
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
....
) {
Text(text = "....")
}
Spacer(
modifier = Modifier
.width(1.dp)
.fillMaxHeight()
.background(color = MaterialTheme.colors.onSurface.copy(0.12f))
)
Text(...)
}

You can set Intrinsic.Max for the preferredHeight of the Row, then set the Spacer to fill max height. You can read more on Intrinsics in this codelab section.
#Composable
fun ListItem() {
Surface(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(8.dp),
elevation = 2.dp
) {
Row(
modifier = Modifier.fillMaxWidth().preferredHeight(IntrinsicSize.Max),
verticalAlignment = Alignment.CenterVertically
) {
Column(
modifier = Modifier
.padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Code")
Text(text = "2456")
}
Spacer(
modifier = Modifier
.preferredWidth(1.dp)
.fillMaxHeight()
.background(color = Color.Black.copy(0.12f))
)
Spacer(modifier = Modifier.weight(1f))
Text(
modifier = Modifier
.padding(horizontal = 8.dp, vertical = 34.dp),
text = "Some name"
)
Spacer(modifier = Modifier.weight(1f))
}
}
}

I've solved it using constraint layout:
Box(modifier = Modifier.padding(Dp(50f))) {
ConstraintLayout(
modifier = Modifier
.border(width = Dp(1f), color = Color.Black)
.fillMaxWidth()
) {
val (left, divider, right) = createRefs()
Column(
modifier = Modifier
.padding(horizontal = Dp(20f))
.constrainAs(left) {
width = Dimension.wrapContent
start.linkTo(parent.start)
top.linkTo(parent.top)
end.linkTo(divider.start)
bottom.linkTo(parent.bottom)
}
) {
Text(text = "Code")
Text(text = "A12")
}
Box(
modifier = Modifier
.width(Dp(1f))
.background(Color.Black)
.constrainAs(divider) {
width = Dimension.wrapContent
height = Dimension.fillToConstraints
start.linkTo(left.end)
top.linkTo(parent.top)
end.linkTo(right.start)
bottom.linkTo(parent.bottom)
}
)
Box(
modifier = Modifier
.constrainAs(right) {
width = Dimension.fillToConstraints
start.linkTo(divider.end)
top.linkTo(parent.top)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) {
Text(
text = "Test",
modifier = Modifier
.padding(vertical = Dp(100f))
.align(Alignment.Center)
)
}
}
}
The key part is using that modifier height = Dimension.fillToConstraints

There are plenty of solutions here, but I thought I could demonstrate the ConstraintLayout approach and add a helpful usage of the IntrinsicSize enum that solves one of the issues (needing an adaptive height for the composable). Interestingly, either IntrinsicSize.Max or IntrinsicSize.Min will yield the desired behavior.
I used most of your code. The key differences are:
declares a guideline (my value passed in for the fraction does not produce the exact result you were looking for, but can be adjusted easily (use a fraction slightly smaller than .2) This can be useful if you expect wrapContent to alter your left Text to vary the location of a spacer, but would prefer a consistent spacer location across a list of these items.
others have mentioned, spacer modifier should include .fillMaxHeight()
define the height of the surface wrapper to be .height(IntrinsicSize.Min) docs ref here: https://developer.android.com/jetpack/compose/layout#intrinsic-measurements
divider start is constrained to the guideline
had to change the Spacer modifier to access the width, instead of preferredWidth
#Composable
fun ListItem(item: Plate) {
Surface(
modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min),
shape = RoundedCornerShape(8.dp),
elevation = 2.dp
) {
ConstraintLayout(
modifier = Modifier.fillMaxWidth(),
) {
val guideline = createGuidelineFromStart(0.2f)
val(column, divider, text) = createRefs()
Column(
modifier = Modifier
.padding(8.dp)
.constrainAs(column){
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(parent.start)
end.linkTo(guideline)
},
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Code")
Text(text = item.code)
}
Spacer(
modifier = Modifier
.constrainAs(divider){
top.linkTo(column.top)
bottom.linkTo(column.bottom)
start.linkTo(guideline)
}
.width(1.dp)
.fillMaxHeight()
.background(color = MaterialTheme.colors.onSurface.copy(0.12f))
)
Text(
modifier = Modifier
.padding(horizontal = 8.dp, vertical = 34.dp)
.constrainAs(text){
start.linkTo(divider.end)
end.linkTo(parent.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
},
text = item.name
)
}
}
}

I think Row layout is enough.
#Preview(showBackground = true, heightDp = 100)
#Composable
fun ListItem(item: PlateUI.Plate = PlateUI.Plate()) {
Card(
shape = RoundedCornerShape(8.dp)
) {
Row(
modifier = Modifier
.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.padding(8.dp),
text = "Code\n${item.code}",
textAlign = TextAlign.Center
)
Box(
Modifier
.fillMaxHeight()
.width(1.dp)
.background(color = MaterialTheme.colors.onSurface.copy(0.12f))
)
Text(
modifier = Modifier
.weight(1f)
.padding(8.dp),
text = item.name,
textAlign = TextAlign.Center
)
}
}
}