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.
Tutorial: Theming in Compose with Material 3
Some popular design systems (most of them non compatible with Jetpack Compose):
-
Lightning Design System 2 (Salesforce)
-
Primer (GitHub)
-
Pajamas Design System (GitLab)
-
Fluent 2 (Microsoft)
-
Atlassian Design System (Atlassian)
-
HubSpot Canvas (HubSpot)
-
Material Design (Google)
-
Polaris web components (Shopify)