Table of Contents

Overview of Image Card UI

This Image Card Composable have Following Features.

  1. Main Cover Image
  2. Bottom Border on cover image
  3. Author image boxed, centered between cover image and  title
  4. Circular Border applied to cover image
  5. Title/Heading Box
  6. Vertical Scroll applied to Title box for long headings.
  7. Round Border radius applied to Card



Cover Image

Author Image/Box



Coding the UI

Assuming, You have already setup the environment for Jetpack Compose. Lets start Coding!

Making a Card Layout

We will start by simply making a function named Image_card(), We will need two painters (for images) and a Title.


Inside Card, we will need one column and three rows (for cover image, author box and title box)

See Following.

fun Image_Card(
    /* Parameters */
    cover_painter: Painter,
    author_painter: Painter,
    title: String) {

        modifier = Modifier
            /* Card Style */
        elevation = 8.dp
    ) {
            modifier = Modifier
                /* Card Will Contain One Column and Three Rows*/
            verticalArrangement = Arrangement.Top
        ) {
            //THE ROWS WILL BE ADDED HERE....

Making Cover Image Layout (1st Row)

Now For Cover Image Layout See Following Code. 

					/* Row #1 --> Cover Image */
Row(modifier = Modifier
To add Line Below Cover Image, 
use drawWithContent*/
.drawWithContent {
    val strokeWidth = Stroke.DefaultMiter
    val y = size.height // - strokeWidth
        brush = SolidColor(Color.Black),
        strokeWidth = strokeWidth,
        cap = StrokeCap.Square,
        start = Offset.Zero.copy(y = y),
        end = Offset(x = size.width, y = y)
horizontalArrangement = Arrangement.Start) {
    Image(painter = cover_painter,
        contentDescription = "Cover Image",
        contentScale = ContentScale.Crop)

Making Author Image Box Layout (2nd Row)

Now For Author Image Box Layout See Following Code. 

					/* Row #2 --> Author Image */
Row(modifier = Modifier
horizontalArrangement = Arrangement.Center) {
    Box(modifier = Modifier
            /* Add Offset to overlap
            * Image between Cover  */
        .offset(0.dp, (-32).dp)
        .border(2.dp, Color.Black, shape = CircleShape)
        Image(painter = author_painter,
            contentDescription = "Author Image Box",
            contentScale = ContentScale.Crop)


Making Title/Description Box Layout (3rd Row)

Now For Title/Description Box Layout See Following Code. 

					/* Row #3 --> Title/Heading/Description */
modifier = Modifier
horizontalArrangement = Arrangement.Start)
    Box(modifier = Modifier
        .offset(0.dp, (-25).dp)
        .padding(10.dp, 0.dp, 10.dp, 0.dp)
        Text(text = title,
            style = TextStyle(Color.Black,
                fontSize = 12.sp)

Download Complete Code

If you want to download Complete Code for Image Card with Title and Author Box | Jetpack Compose UI Layout. Click Here