Home > Software design >  Android Jetpack - Fit Image as Custom Style in Card
Android Jetpack - Fit Image as Custom Style in Card

Time:08-28

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): enter image description here

I wanted to set the image's bottom edge to bottom of card, and overflow the top a little bit like that output:

enter image description here

You can get the image enter image description here

  • Related