Compose

display a list with a image and a text with jetpack compose
mail@pastecode.io avatar
unknown
kotlin
2 years ago
1.5 kB
4
Indexable
@Composable
fun FlowerCard(flower: Flower) {
    Row(
        modifier = Modifier
            .padding(start = 16.dp, top = 8.dp, end = 8.dp, bottom = 8.dp)
            .fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Box(
            modifier = Modifier
                .padding(all = 4.dp)
        ) {
            Image(
                painter = painterResource(flower.image),
                contentDescription = "flower_image_content_description",
                modifier = Modifier
                    .size(48.dp)
            )
        }
        
        Spacer(modifier = Modifier.width(8.dp))

        Text(
            text = flower.name,
            color = MaterialTheme.colorScheme.error,
            style = MaterialTheme.typography.bodySmall
        )

    }
}

// usage in the screen 

class FlowersListActivity : AppCompatActivity() {
// ...
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LazyColumn(Modifier.padding(top = 24.dp)) {
                        items(SampleData.flowers) {
                            FlowerCard(flower = it)
                        }
                    }
                }
            }
        }
    }
// ..
}