Your Second Kotlin Android App

So far you’ve created a bunch of UI components. In this episode, you’ll connect the components to the Scaffold.

Head over to the TaskListScreen file, above the TaskListContent function, and add the following code:

@Composable
fun TaskListScreen() {
    Scaffold(
        topBar = {
            ListMakerTopAppBar(
                title = stringResource(id = R.string.label_list_maker),
                showBackButton = false,
                onBackPressed = {}
            )
        },
        content = {
            TaskListContent(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize(),
                tasks = emptyList(),
                onClick = { taskName ->
                  // TODO navigate to the tasks details screen
                }
            )
        },
        floatingActionButton = {
            ListMakerFloatingActionButton(
                title = stringResource(id = R.string.name_of_list),
                inputHint = stringResource(id = R.string.task_hint),
                onFabClick = {
                   // TODO save the task list
                }
            )
        }
    )
}

Resolve the string resource errors by creating the required resources.

Note:

• label_list_maker: List Maker
• name_of_list: What is the name of your list?
• task_hint: Enter name.

In the code above, you’ve used the Scaffold composable to display the top app bar and the floating action button. You’ve passed the ListMakerTopAppBar, TaskListContent and ListMakerFloatingActionButton composable functions in the topBar, content, and floatingActionButton slots respectively. The TaskListContent composable function has a modifier parameter that you’ve used to add padding to the content. The tasks parameter is a list of Task objects that you’ll use to display the tasks in the list. For now, you’ve passed an emptyList but you’ll change that later on. You also have a couple of to-do’s that you’ll address later on.

You have everything on the Scaffold setup. Now you need to call the TaskListScreen composable function from the MainActivity file.

Open MainActivity.kt.

Replace the Surface composable and its content with a call to TaskListScreen() composable function. Your final result should look like this:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ListMakerScriptTheme {
               TaskListScreen()
            }
        }
    }
}

Also, update the preview as follows:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ListMakerScriptTheme {
        TaskListScreen()
    }
}

Remember to delete the other unused Greeting method.

Build the project and switch to the Split mode and you can be able to see the UI you’ve created so far. You can see the top app bar with the title List Maker and a floating action button with add icon.

Build and run the app. The app is similar to what you saw in the preview. The screen is blank since you don’t have any tasks in the list.