Basic Android Compose – Dynamic Lazy Column

In this tutorial, we will dive into the versatile world of Android Compose to build a dynamic Lazy Column. By seamlessly integrating arrays of fruits and cities, we’ll explore how to create a responsive UI that adapts to user interactions.

You will learn how to toggle between different datasets with a simple switch, enhancing your Android app’s interactivity and visual appeal. This step-by-step guide is designed to enrich your skills in Android Compose, making you proficient in crafting elegant and efficient lists.

Environment

• Android Studio Hedgehog | 2023.1.1
• Compose version: androidx.compose:compose-bom:2023.08.00
• Mac OS Sonoma 14.1
• Pixel 6 API 30 Emulator

On Today’s Menu

• Crafting a Dynamic List with LazyColumn() and Switch().

Step1: Setting Up Your Project

Let’s launch the Android Studio. Navigate to the New Project section and choose the Empty Compose Activity. This option creates the foundation for our project, offering a clean slate to implement our dynamic LazyColumn.

This initial step ensures you start with all the necessary Compose setup, making your development process smoother and more efficient.

Choose this option

Step 2: Setting Up The Data

Let’s begin defining the core content of our app. Open the strings.xml file in your project's res/values directory. Here, we'll create two crucial string arrays: one for fruits and another for cities. While hardcoding these files is possible, using strings.xml for such data is a best practice, especially when dealing with multiple entries. This approach keeps your code clean and maintainable, making it easier to localize your app in the future.

Add the following entries to establish a diverse dataset:

<resources>
    <string name="app_name">...</string>
    <string-array name="fruits">
        <item>Apple</item>
        <item>Apricot</item>
        <item>Avocado</item>
        <item>Banana</item>
        <item>Blackberry</item>
        <item>Blueberry</item>
        <item>Cherry</item>
        <item>Coconut</item>
        <item>Guava</item>
        <item>Raspberry</item>
        <item>Grape</item>
        <item>Jackfruit</item>
        <item>Kiwifruit</item>
        <item>Mango</item>
        <item>Watermelon</item>
        <item>Orange</item>
        <item>Papaya</item>
        <item>Pineapple</item>
        <item>Strawberry</item>
        <item>Tamarindo</item>
    </string-array>
    
    <string-array name="cities">
        <item>Rome</item>
        <item>Ecatepec</item>
        <item>Taipei</item>
        <item>Puebla</item>
        <item>Ciudad Juarez</item>
        <item>Guadalajara</item>
        <item>Delhi</item>
        <item>Manila</item>
        <item>Chihuahua</item>
        <item>Merida</item>
        <item>New York</item>
        <item>Cancún</item>
        <item>Saltillo</item>
        <item>Hermosillo</item>
        <item>Mexicali</item>
        <item>Culiacán</item>
        <item>Queretaro</item>
        <item>Tokio</item>
        <item>Nairobi</item>
        <item>Athens</item>
    </string-array>
</resources>

Step 3: Implementing the DynamicLazyColumn

Advance to the heart of our app by creating DynamicLazyColumn.kt alongside MainActivity.kt. In this Kotlin file, we'll craft the DynamicLazyColumn composable function. It's designed to dynamically toggle between the fruits and cities datasets based on user input, showcasing the real-time responsiveness of Android Compose.

Here’s how we’ll implement this feature:

// Your package...

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Divider
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DynamicLazyColumn(list1: Array<String>, list2: Array<String>) {
    val mCheckedState = remember { mutableStateOf(true) }
    var list: List<String>
    // Modifier.fillMaxSize() uses all the available parent space
    Column(Modifier.fillMaxSize()) {
        // displays list view with LazyColumn
        LazyColumn(Modifier.weight(2f)) {
            list = 
                if (mCheckedState.value) list1.toList() 
                else list2.toList()
            items(list) { text ->
                // specifies text & divider for each item
                Text(text, modifier = Modifier.padding(16.dp))
                Divider()
            }
        }
        Switch(
            checked = mCheckedState.value,
            // update mCheckedState.value when state changes
            onCheckedChange = { mCheckedState.value = it }
        )
    }
}

Step 4: Integrating DynamicLazyColumn into MainActivity

The final step is to see our DynamicLazyColumn() in action. We'll integrate it into the MainActivity.kt. This activity will serve as the canvas where our dynamic list comes to life. Update MainActivity.kt and set it up as follows:

// Your package...

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DynamicLazyColumn(
                resources.getStringArray(R.array.fruits),
                resources.getStringArray(R.array.cities)
            )
        }
    }
}

After following the steps outlined in this guide, your application should feature a fully functional Lazy Column, as shown below:

App Result

This layout dynamically updates to display a list of fruits, reflecting the changes as you toggle the switch. It’s a clear demonstration of how Android Compose allows for the creation of responsive and interactive UI elements with minimal fuss.

As you explore the list you’ve created, take a moment to appreciate the seamless transitions and the robust simplicity that Compose provides.

I welcome your thoughts and questions — your insights are crucial for refining these guides. If you have found value in this content, a clap 👏 would be much appreciated, and your feedback will shape the quality of future articles. Thank you for joining me in this coding adventure! Happy coding

Next Steps: Elevate Your Android Compose Skills

Are you ready to take your Android Compose abilities to the next level? If you’ve enjoyed this tutorial and are eager to expand your knowledge, check out these skill-enhancing tutorials:

Intermediate Android Compose - Todo App UI

Intermediate Android Compose - Todo App with Room Database

Intermediate Android Compose - Custom Circular Progress Bar Implementation

Intermediate Android Compose - Bank Card UI Implementation

Deuk Services: Your Gateway to Leading Android Innovation

Are you looking to boost your business with top-tier Android solutions?Partner with Deuk services and take your projects to unparalleled heights.

Expert Android Consultancy Services | Deuk: Modern Native Android Solutions