Your Second Kotlin Android App

In the previous episode, you prepared TaskListScreen but had no tasks to display. Instead of displaying a blank screen, you should show a view with the message No tasks yet**. In this challenge, you’ll an create an EmptyView Composable with the No tasks yet text and add it to the TaskListScreenContent.

Create a file named EmptyView.kt in the views package. In the EmptyView file, create a Column that has the following properties:

• A Modifier that has a fill maximum size property.
• Contents inside the Column should be centered horizontally and vertically.
• The Column should have an Icon composable displaying Icons.Default.List.
• The Column should have a Text composable with the text No tasks yet.
• A space of 16 dp between the Icon and Text composables.
• Add a preview for the EmptyView composable.
• Use your Compose skills to add the EmptyView composable to the TaskListScreenContent composable.

Pause the video and attempt the challenge.

Welcome back! Hope you had fun with the challenge. Here’s a quick demo of what you should have done.

Create a file named EmptyView.kt in the views package. In the EmptyView file, add the following code:

@Composable
fun EmptyView(message: String) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = Icons.Default.List,
            contentDescription =  stringResource(id = com.kodeco.android.listmaker.R.string.cd_list_icon),
            modifier = Modifier.size(100.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = message,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

@Preview(showBackground = true)
@Composable
fun EmptyViewPreview() {
    EmptyView(message = "No tasks yet")
}

Create the cd_list_icon string resource in the strings.xml file with the value List icon. Here’s a breakdown of the code:

• The EmptyView composable has a message parameter which is a String type. The message parameter is used to display the message in the Text composable.
• The EmptyView composable has a Column composable which has the following properties:
  • A Modifier that has a fillMaxSize property.
  • The Column composable has a verticalArrangement property set to Arrangement.Center which centers the contents vertically.
  • The Column composable has a horizontalAlignment property set to Alignment.CenterHorizontally which centers the contents horizontally.
• The Column composable has an Icon Composable with the following properties:
  • The imageVector property is set to Icons.Default.List which displays the list icon.
  • The contentDescription property is set to the string resource cd_list_icon.
  • The Modifier property has a size property set to 100.dp which sets the size of the icon to 100.dp.
• The Column composable has a Spacer composable with a Modifier which has a height of 16.dp.
• The Column composable has a Text composable with the following properties:
  • The text property is set to the message parameter.
  • The style property is set to MaterialTheme.typography.titleMedium which sets the style of the text to titleMedium.
• Lastly, you create the EmptyViewPreview composable which is used to preview the EmptyView composable. You can build the project to be able to preview the EmptyView composable.

Next, head over to the TaskListContent composable. Add a check to see if the tasks parameter is empty. If it is empty, display the EmptyView composable. If it is not empty, display the LazyColumn composable. Here’s the final code:

@Composable
fun TaskListContent(modifier: Modifier, tasks: List<TaskList>, onClick: (String) -> Unit) {
    if (tasks.isEmpty()) {
        EmptyView(message = stringResource(id = R.string.text_no_tasks))
    } else {
        LazyColumn(
            modifier = modifier,
            content = {
                items(tasks) {
                    ListItemView(
                        value = it.name,
                        onClick = onClick
                    )
                }
            }
        )
    }
}

Create the text_no_tasks string resource with the value No tasks yet. The Composable function is still the same as before with the only addition being the check if your tasks parameter is empty.

Build and run your app. Now the app should display the No tasks yet message since there are no tasks.

Congratulations on being able to display a message when there are no tasks!