Showing Lists using Jetpack Compose is relatively easy. Having a divider between the items of the list makes the UI neat and clean. Let’s learn how to show lists with a divider between items in Android Jetpack Compose.
LazyColumn composable is used to show lists in a more efficient way. There is no built-in way to show a divider between items. Hence, we have to render a divider for each item. See the code snippet given below.
@Composable
fun TextList() {
val listA = listOf<String>("Example", "Android", "Tutorial", "Jetpack", "Compose", "List", "Example","Simple")
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp)
) {
items(listA) { item ->
Text(modifier = Modifier.padding(20.dp), text = item)
Divider(color = Black, thickness = 0.5.dp)
}
}
}The output will be as given below.
As you see, the last item on the list also has a Divider. You can get rid of the last divider from the list by using itemsIndexed instead of items. See the code snippet given below.
@Composable
fun TextList() {
val listA = listOf<String>("Example", "Android", "Tutorial", "Jetpack", "Compose", "List", "Example","Simple")
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp)
) {
itemsIndexed(listA) { index,item ->
Text(modifier = Modifier.padding(20.dp), text = item)
if (index < listA.lastIndex)
Divider(color = Black, thickness = 0.5.dp)
}
}
}Now, you will get the following output.
That’s how you remove the last divider from the List in Jetpack Compose.
Following is the complete code for reference.
package com.example.myapplication
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.itemsIndexed
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.Modifier
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
TextList()
}
}
}
}
}
@Composable
fun TextList() {
val listA = listOf<String>("Example", "Android", "Tutorial", "Jetpack", "Compose", "List", "Example","Simple")
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp)
) {
itemsIndexed(listA) { index,item ->
Text(modifier = Modifier.padding(20.dp), text = item)
if (index < listA.lastIndex)
Divider(color = Black, thickness = 0.5.dp)
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
TextList()
}
}I hope this Jetpack Compose List tutorial is helpful for you. Thank you for reading.
