Jetpack Compose LazyRow: Building Horizontal Lists Efficiently

 Jetpack Compose - LazyRow

The LazyRow is a horizontal version of LazyColumn in Jetpack Compose. It allows you to create scrollable horizontal lists while maintaining efficiency by rendering only the visible items. 

In this guide, we'll explore the usage, customization, and practical examples of LazyRow.

What is LazyRow?

LazyRow is a horizontally scrollable layout designed for rendering large lists efficiently. It works by composing and disposing of items dynamically as the user scrolls.

Key Features of LazyRow

• Horizontal Scrolling: Ideal for horizontal lists, such as carousels or image galleries.
• Efficient Rendering: Renders only visible items, optimizing memory usage.
• Custom Layouts: Supports headers, footers, and mixed item types.

Basic Usage of LazyRow

Here’s a simple example of using LazyRow to display a horizontal list:

package com.boltuix.composedemo

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.boltuix.composedemo.R

/**
 * 🌟 LazyRow Demo
 * A horizontally scrolling list of items displayed as cards with an image and text.
 */
@Composable
fun LazyRowDemo() {
    // Sample data for the LazyRow
    val items = (1..10).map { "Item #$it" }

    LazyRow(
        modifier = Modifier.fillMaxWidth(), // Occupies the full width
        horizontalArrangement = Arrangement.spacedBy(16.dp), // Adds space between items
        contentPadding = PaddingValues(horizontal = 16.dp) // Padding at the start and end
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .width(200.dp) // Fixed width for each card
                    .height(150.dp), // Fixed height for each card
                shape = RoundedCornerShape(8.dp), // Adds rounded corners
                elevation = androidx.compose.material3.CardDefaults.cardElevation(8.dp)
            ) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    // Image at the top of the card
                    Image(
                        painter = painterResource(id = R.drawable.placeholder_image), // Replace with your drawable resource
                        contentDescription = null,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(100.dp), // Fixed height for the image
                        contentScale = ContentScale.Fit // Crops and scales the image
                    )

                    // Text below the image
                    Text(
                        text = item,
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

/**
 * 👀 Preview Function
 * Used to preview the LazyRow layout in Android Studio.
 */
@Preview(showBackground = true)
@Composable
fun PreviewLazyRowDemo() {
    LazyRowDemo()
}

..