multipurpose-modern-layout-android-jetpack-compose-2

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

Demo

jetpack-compose-ui-image-card-with-author-box

Cover Image

Author Image/Box

Title/Descrption

jetpack-compose-ui-demo

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.

Advertisement

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

See Following.

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

    Card(
        modifier = Modifier
            /* Card Style */
            .fillMaxWidth(0.5f)
            .height(250.dp)
            .padding(5.dp),
        elevation = 8.dp
    ) {
        Column(
            modifier = Modifier
                /* Card Will Contain One Column and Three Rows*/
                .fillMaxSize(),
            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
.fillMaxWidth()
.fillMaxHeight(0.5f)
/*
To add Line Below Cover Image, 
use drawWithContent*/
.drawWithContent {
    drawContent()
    val strokeWidth = Stroke.DefaultMiter
    val y = size.height // - strokeWidth
    drawLine(
        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
.fillMaxWidth(),
horizontalArrangement = Arrangement.Center) {
    Box(modifier = Modifier
        .size(64.dp)
            /* Add Offset to overlap
            * Image between Cover  */
        .offset(0.dp, (-32).dp)
        .border(2.dp, Color.Black, shape = CircleShape)
        .clip(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 */
Row(
modifier = Modifier
.fillMaxWidth(),
horizontalArrangement = Arrangement.Start)
{
    Box(modifier = Modifier
        .offset(0.dp, (-25).dp)
        .padding(10.dp, 0.dp, 10.dp, 0.dp)
        .verticalScroll(rememberScrollState())
    ){
        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