I have a screen that includes only a LazyRow horizontal list includes 2 Cards, so you can slide cards. You can see my code below:
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.jetpackdeneme.R
@Composable
fun TestScreen1() {
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(20.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
item {
LazyRow(
Modifier.height(160.dp),
contentPadding = PaddingValues(horizontal = 16.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
item {
PromotionItem1(
imagePainter = painterResource(id = R.drawable.statue_of_liberty),
title = "AMERICA",
header = "USA",
backgroundColor = Color.White
)
}
item {
PromotionItem1(
imagePainter = painterResource(id = R.drawable.statue_of_liberty),
title = "AMERICA",
header = "USA",
backgroundColor = Color.White
)
}
}
}
}
}
}
@Composable
fun PromotionItem1(
title: String = "",
header: String = "",
backgroundColor: Color = Color.Transparent,
imagePainter: Painter
) {
Card(
Modifier.width(300.dp),
shape = RoundedCornerShape(8.dp),
backgroundColor = backgroundColor,
elevation = 0.dp
) {
Row {
Image(
painter = imagePainter, contentDescription = "",
modifier = Modifier
.fillMaxHeight()
.weight(1f),
alignment = Alignment.CenterEnd,
contentScale = ContentScale.Crop
)
Column(
Modifier
.padding(horizontal = 16.dp)
.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Text(text = title, fontSize = 14.sp, color = Color.Black, fontWeight = FontWeight.Bold)
Text(text = header, fontSize = 14.sp, color = Color.Black)
}
}
}
}
The output is like this (it is not fitting, and I want a custom style):
I wanted to set the image's bottom edge to bottom of card, and overflow the top a little bit like that output: