Your Second Kotlin Android App

Aug 29 2023 · Kotlin 1.8.21, Android 13, Android Studio Flamingo | 2022.2.1

Part 2: Create Your Views

14. Connect the Components to the Scaffold.

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 13. Use LazyLayouts Next episode: 15. Challenge: Create an EmptyView

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

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

@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
                }
            )
        }
    )
}
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ListMakerScriptTheme {
               TaskListScreen()
            }
        }
    }
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ListMakerScriptTheme {
        TaskListScreen()
    }
}