Card

 How to use Card in android jetpack compose.

package com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}



@Composable
fun MainContent() {
    Column(
        modifier = Modifier
            .padding(20.dp)
            .verticalScroll(rememberScrollState())
    ) {

        Card(
            //shape = MaterialTheme.shapes.medium,
            shape = RoundedCornerShape(8.dp),
            // modifier = modifier.size(280.dp, 240.dp)
            modifier = Modifier.padding(10.dp,5.dp,10.dp,10.dp),
            elevation = 10.dp,
            backgroundColor = Color.White
        ) {
            Column(modifier = Modifier.clickable(onClick = {  })) {

                Image(
                    painter = painterResource(R.drawable.ic_launcher_background),
                    contentDescription = null, // decorative
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .height(150.dp)
                        .fillMaxWidth()
                )

                Column(modifier = Modifier.padding(16.dp)) {
                    Text(
                        text = "Title",
                        style = androidx.compose.material.MaterialTheme.typography.h6,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )

                    Spacer(modifier = Modifier.height(5.dp))

                    Text(
                        text = "Sub title Example code for android + composes app developers.",
                        //maxLines = 1,
                        //overflow = TextOverflow.Ellipsis,
                        style = androidx.compose.material.MaterialTheme.typography.body2
                    )
                }
            }
        }
    }
}

• Card with content argument
• Card with shape argument
• Card with background color argument
• Card with elevation argument
• Card with border argument

                // * Card with content argument
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    content = {
                        Text("Card with content argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                    }
                )

                // * Card with shape argument
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    //set shape of the card
                    shape = RoundedCornerShape(16.dp),
                    content = {
                        Text("Card with shape argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                    }
                )

                // * Card with background color argument
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    //set background color of the card
                    backgroundColor = androidx.compose.ui.graphics.Color.Gray,
                    content = {
                        Text("Card with background color argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                    }
                )

                // * Card with elevation argument
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    //set elevation of the card
                    elevation = 10.dp,
                    content = {
                        Text("Card with elevation argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                    }
                )

                // * Card with border argument
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    border = BorderStroke(2.dp, androidx.compose.ui.graphics.Color.Black),
                    content = {
                        Text("Card with border argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                    }
                )

..