UI

UI

The user interface is built by defining a set of @Composable functions that take in data and emit UI elements.

 1data class Book(val name: String)
 2
 3@Composable
 4fun BookList(books: List<Book>) {
 5    Column {
 6        books.forEach { book ->
 7            Text(text = book.name)
 8        }
 9    }
10}

@Preview @Composable functions don’t take any parameters.

 1@Preview
 2@Composable
 3fun BookListPreview() {
 4    BookList(
 5        listOf(
 6            Book("Le Petit Prince"),
 7            Book("Wuthering Heights"),
 8            Book("The Picture of Dorian Gray")
 9        )
10    )
11}

Theming

Jetpack Compose implements Material Design—a comprehensive design system by Google.

Some popular design systems (most of them non compatible with Jetpack Compose):