Your Second Kotlin Android App

You now understand all the different types of layouts and components that are available in Jetpack Compose. In this episode, you will learn how to create a list item view that you can use to display a list of items in your app.

To begin with, inside, you’ll create a new package named views inside your main source files. Right-click the com.kodeco.android.listmaker package and select New > Package. Name the package views.

Next, inside your newly created views package, create a new Kotlin file named ListItemView.kt. Right-click the views** package and select New > Kotlin File/Class. Name the file ListItemView.kt. This creates an empty file for you where you’ll write the code for your list item view.

Inside the ListItemView.kt file, add the following code:

@Composable
fun ListItemView(value: String, onClick: (String) -> Unit) {

}

Here, you have created a new Composable function named ListItemView. You’ll use this function to create a list item view to display a list of items in your app. The function has two parameters:

• value - This is a String that will be used to display the text for the list item.
• onClick - This is a function that will be called when the list item is clicked.

Still inside the ListItemView.kt file, add the following code in your ListItemView function:

Surface(
    modifier = Modifier
        .fillMaxWidth()
) {
}

In the code above, you’ve used the Surface Composable to create a surface that will display the list item view. The Surface Composable is a pre-built Composable that represents a rectangular area with a background color, elevation, and corner radius. It has a trailing lambda that you’ll use to add more UI elements.

Next, inside the Surface Composable, add the following code:

Column(
    modifier = Modifier.padding(10.dp)
) {
    Text(
        text = value,
        modifier = Modifier
            .padding(4.dp)
    )
    Spacer(Modifier.size(8.dp))
}

In the code above, you’ve used the Column Composable to create a column that has a Text Composable and a Spacer Composable. The Text Composable displays the text for the list item. The Spacer Composable adds some space between the Text Composable and the Surface Composable. In the Text, you’ve passed a Modifier that adds some padding to the UI elements and for Spacer, you’ve passed a Modifier that specifies the size of the space. Notice you’ve passed the value parameter to the Text Composable.

Next, you’ll add shapes and click listeners to the Surface Composable. Add the following code above the Surface Composable:

val shape = RoundedCornerShape(8.dp)
val clickedItem by remember { mutableStateOf(value) }

Here you’re defining a shape variable that will create a rounded corner shape for the Surface Composable. You’re also defining a clickedItem variable to keep track of the list item that was clicked. You’re using the remember Composable to create a MutableState that will be used to keep track of the list item that was clicked.

Next, modify the Surface Composable to add the shape and onClick parameters.

Surface(
    modifier = Modifier
        .fillMaxWidth()
        .clickable { onClick(clickedItem) },
    shape = shape,
)

Here:

• When the Surface Composable is clicked, the onClick function that you passed as a parameter will be called. In this case, you’re passing the clickedItem variable as a parameter to the onClick function.
• You are specifying the shape of the Surface using the shape parameter. In this case, you’re passing the shape variable that you had defined earlier.

Lastly, improve the appearance of the Surface by addding a bit of padding and a background color:

Surface(
    modifier = Modifier
        .fillMaxWidth()
        .padding(6.dp)
        .clickable { onClick(clickedItem) },
    shape = shape,
    color = Color.LightGray.copy(alpha = 0.3f),
)

• You’ve added a padding of 6 dp around the Surface Composable.
• For the color parameter, you’re passing a Color object that has a light gray color with an alpha value of 0.3.