Thursday, 22 June 2023

JetPack Compose : Simple ListView Example

 1. Add the required dependencies to your project's build.gradle file:

 

In root Project gradle file

buildFeatures {
        compose true
 

In app module gradle file

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.compose.ui:ui:1.0.4'
    implementation 'androidx.compose.material:material:1.2.1'
    implementation 'androidx.compose.ui:ui-tooling:1.0.4'
}

 2. Create a new Composable function in your activity or fragment

package com.rajeshvijayakumr.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class ListViewActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

val items = listOf("Item 1", "Item 2", "Item 3","Item 4", "Item 5",
                               "Item 6","Item 7", "Item 8", "Item 9")

setContent {
MyScreen(items)
}
}
}

@Composable
fun MyScreen(items: List<String>) {
LazyColumn {
items(items) { item ->
ListItem(item = item)
}
}
}

@Composable
fun ListItem(item: String) {
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
) {
Text(text = item)
// Add other custom content for each item
}
}



In the above example, MyScreen is a composable that takes a list of items and creates a LazyColumn with items to iterate over the list. For each item, it calls the ListItem composable, passing the item as a parameter.

ListItem is a custom composable that represents each item in the list. You can define the content and layout for each item inside this composable. In this example, it's a Column with a Text component displaying the item's text. You can add additional custom content for each item as needed.

In the MainActivity, the list of items is provided to the MyScreen composable, which sets the content view of the activity using setContent.

When you run the app, you should see a list of items displayed vertically, and you can customize the content and layout of each item in the ListItem composable based on your requirements.

 Output ScreenShot



Source Code : Click Here to Github Link

No comments:

Post a Comment