ListView in Android using Jetpack Compose

A ListView is a type of view in which data is being displayed in a vertically scrollable list and each view within the list is placed one below to other. ListView is used in most applications to display the data of any specific categories within a vertically scrollable format. In this article, we will take a look at the implementation of ListView in Android using Jetpack Compose. For implementing ListView in Android using Jetpack Compose we have to use the LazyColumn widget to display a Listview. 

Attributes of LazyColumn widget for displaying a ListView

Attributes	Description
verticalArrangement	This attribute is used to specify vertical Arrangement to the listview,
horizontalArrangement	This attribute is use to specify horizontal arrangement to the listview.
modifier	The modifier is used to add custom styling to the listview such as background color, padding, and border to our list view.
items	It is used to specify the UI for the individual item of the listview which we have to display

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Adding ListView in MainActivity.kt file

Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.example.newcanaryproject

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.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import com.example.newcanaryproject.ui.theme.NewCanaryProjectTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // A surface container using the
                // 'background' color from the theme
                Surface(
                    // to add background color for our screen.
                    color = MaterialTheme.colors.background
                ) {
                    // on below line we are calling display
                    // list function to display the list
                    displayList()
                }
            }
        }
    }
}

// below is the Composable function
// which we have created for our ListView.
@OptIn(ExperimentalUnitApi::class)
@Composable
fun displayList() {
    // on below line we arecreating a simple list
    // of strings and adding different programming
    // languages in it.
    val languages = listOf(
        "C++", "C", "C#", "Java", "Kotlin", "Dart", "Python", "Javascript", "SpringBoot",
        "XML", "Dart", "Node JS", "Typescript", "Dot Net", "GoLang", "MongoDb",
    )
    // on below line we are
      // creating a simple column
    Column(
        // inside this column we are specifying modifier
        // to specify max width and max height
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        // on below line we are specifying horizontal alignment
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // on below line we are creating a simple text
        // view for displaying heading for our application
        Text(
            text = "Simple ListView Example",
            // in modifier we are specifying padding
            // for our text from all sides.
            modifier = Modifier.padding(10.dp),
            // on below line we are specifying
            // style for our text
            style = TextStyle(
                color = Color.Black,
                fontSize = TextUnit(value = 20.0F, type = TextUnitType.Sp)
            ), fontWeight = FontWeight.Black
        )
        // on below line we are calling lazy column
        // for displaying listview.
        LazyColumn {
            // on below line we are populating
            // items for listview.
            items(languages) { language ->
                // on below line we are specifying ui for each item of list view.
                // we are specifying a simple text for each item of our list view.
                Text(language, modifier = Modifier.padding(15.dp))
                // on below line we are specifying
                // divider for each list item
                Divider()
            }
        }
    }
}

Output: