multipurpose-modern-layout-android-jetpack-compose

Table of Contents

Card Layout Features

  • Stylish Layout
  • Can be used with any Media Types Hence Multipurpose
  • Media Cover Image
  • Media Title
  • Media Quality
  • Media Release Year
  • Media Playback Time
  • Media Type [ Movie, TV-Show, Game or Music etc ]

Demo

stylish-layout-jetpack-compose-saimhafeez

Cover Image

Title

Year of Release

Media Length

Quality

Media Type

Coding Stylish Layout

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

Setting up Card and Column Layout

We will start by simply making a function named Media_card(), We need following parameters

Advertisement

  • media_cover: Painter
  • media_title: String
  • media_length: String
  • media_year: String
  • media_quality: String
  • media_type: String

See Following.

				
					@Composable
fun Media_card(
    /* Parameters */
    media_cover: Painter,
    media_title: String,
    media_length: String,
    media_year: String,
    media_quality: String,
    media_type: String)
{

    Card(modifier = Modifier
        .fillMaxSize(0.5f)
        .height(250.dp)
        .padding(2.dp))
    {
        Column(modifier = Modifier
            .background(Color.Black),
        verticalArrangement = Arrangement.SpaceBetween)
        {
            
        }
    }
}
				
			

Coding Cover & Quality Box (Row: 1)

Now For Cover Image & Quality Tag Box Layout See Following Code. 

				
					/* Cover Image and Top Right Quality Tag */
Row(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(0.6f),
verticalAlignment = Alignment.Top
) {
    Box(){
        /* COVER IMAGE */
        Image(painter = media_cover,
            contentDescription = "Media Cover",
            contentScale = ContentScale.Crop)
        /* Quality White TAG Box ~Top Right~  */
        Text(text = media_quality,
            style = TextStyle(Color.Black),
            modifier = Modifier
                .padding(0.dp, 5.dp, 5.dp, 0.dp)
                .clip(RoundedCornerShape(6.dp))
                .background(Color.White)
                .padding(5.dp, 0.dp, 5.dp, 0.dp)
                .align(Alignment.TopEnd),
        )
    }

}
				
			

Coding Title Box (Row: 2)

Now For Title Box Row See Following Code. 

				
					/* Title */
Row(modifier = Modifier
.fillMaxWidth()
.padding(0.5.dp, 0.dp, 0.5.dp, 0.dp),
horizontalArrangement = Arrangement.Center
) {
    Text(text = media_title,
        style = TextStyle(Color.White,
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold),
        maxLines = 2)
}
				
			

Coding Year and Length Box (Row: 3)

Now For Basic Media Info Box (Year and Length). See Following Code. 

				
					/* Media Year and Length Info Box */
Row(modifier = Modifier
.fillMaxWidth()
.padding(5.dp, 0.dp, 5.dp, 0.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
    Column() {
        Text(text = "● $media_year", style = TextStyle(Color.White))
    }
    Column() {
        Text(text = "● $media_length", style = TextStyle(Color.White))
    }
}
				
			

Coding MediaType Box (Row: 4)

Now For Media Type Box. See Following Code.

				
					/* Media Type Box */
Row(modifier = Modifier
.fillMaxWidth()
.padding(0.dp, 0.dp, 5.dp, 5.dp),
horizontalArrangement = Arrangement.End
){
    Text(text = media_type,
        style = TextStyle(Color.White),
        maxLines = 1,
        modifier = Modifier
            .border(2.dp, Color.White)
            .padding(5.dp)
    )
}
				
			

Download Complete Code

Download Complete Source Code from HERE

If You liked This Layout, Share it with your Friends and Comment your ideas or improvement.