diff --git a/JetNews/README.md b/JetNews/README.md index 52f41a3c9a..0004acbb28 100644 --- a/JetNews/README.md +++ b/JetNews/README.md @@ -55,7 +55,7 @@ This screen dives into the Text API, showing how to use different fonts than the [`Typograhy`][5]. It also adds a bottom appbar, with custom actions. [4]: app/src/main/java/com/example/jetnews/ui/article -[5]: app/src/main/java/com/example/jetnews/ui/Typography.kt +[5]: app/src/main/java/com/example/jetnews/ui/theme/Type.kt ### Interests screen diff --git a/Jetcaster/README.md b/Jetcaster/README.md index 2d2f6b22c8..1f132679b7 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -26,7 +26,7 @@ This sample contains 1 screen so far: the home screen. It is split into sub-scre ### Dynamic theming The home screen currently implements dynamic theming, using the artwork of the currently selected podcast from the carousel to update the `primary` and `onPrimary` [colors](https://developer.android.com/reference/kotlin/androidx/compose/material/Colors). You can see it in action in the screenshots above: as the carousel item is changed, the background gradient is updated to match the artwork. -This is impemented in [`DynamicTheming.kt`](app/src/main/java/com/example/jetcaster/util/DynamicTheming.kt), which provides the `DynamicThemePrimaryColorsFromImage` composable, to automatically animate the theme colors based on the provided image URL, like so: +This is implemented in [`DynamicTheming.kt`](app/src/main/java/com/example/jetcaster/util/DynamicTheming.kt), which provides the `DynamicThemePrimaryColorsFromImage` composable, to automatically animate the theme colors based on the provided image URL, like so: ``` kotlin val dominantColorState: DominantColorState = rememberDominantColorState() @@ -81,7 +81,7 @@ The podcast data in this sample is dynamically fetched from a number of podcast The [`PodcastRepository`][podcastrepo] class is responsible for handling the data fetching of all podcast information: - Each podcast is fetched using [OkHttp][okhttp], and then parsed using [Rome][rome], within [`PodcastFetcher`][fetcher]. - - The parsed entites are then added to the local data stores: [`PodcastStore`][podcaststore], [`EpisodeStore`][epstore] & [`CategoryStore`][catstore] for storage in the local [Room][room] [`JetcasterDatabase`][db] database. + - The parsed entities are then added to the local data stores: [`PodcastStore`][podcaststore], [`EpisodeStore`][epstore] & [`CategoryStore`][catstore] for storage in the local [Room][room] [`JetcasterDatabase`][db] database. ### Follow podcasts diff --git a/Jetsurvey/README.md b/Jetsurvey/README.md index 175ac81cf2..935a45f748 100644 --- a/Jetsurvey/README.md +++ b/Jetsurvey/README.md @@ -6,9 +6,7 @@ showcase text input, validation and state capabilities of Compose. Screenshots ----------- - - - + ## Features diff --git a/Owl/README.md b/Owl/README.md index 6f14baa973..542cc774c3 100644 --- a/Owl/README.md +++ b/Owl/README.md @@ -39,7 +39,7 @@ Compose makes it simple to create a library of components and use them throughou #### [Utilities](app/src/main/java/com/example/owl/ui/utils/) Owl implements some utility functions of interest: * [Window insets](https://goo.gle/compose-insets) will likely be provided by the Compose library at some point. Until then this demonstrates how it can be implemented. -* [Navigation](app/src/main/java/com/example/owl/ui/Navigation.kt): an implementation of [Android Architecture Components Navigation](https://developer.android.com/guide/navigation) will be provided for Compose at some point. Until then this class provides a simple [`Navigator`](app/src/main/java/com/example/owl/ui/Navigation.kt#L32) with back-stack and a [`backHandler`](app/src/main/java/com/example/owl/ui/Navigation.kt#L79) effect. +* [Navigation](app/src/main/java/com/example/owl/ui/utils/Navigation.kt): an implementation of [Android Architecture Components Navigation](https://developer.android.com/guide/navigation) will be provided for Compose at some point. Until then this class provides a simple [`Navigator`](app/src/main/java/com/example/owl/ui/utils/Navigation.kt#L32) with back-stack and a [`backHandler`](app/src/main/java/com/example/owl/ui/utils/Navigation.kt#L79) effect. ## Data Domain types are modelled in the [model package](app/src/main/java/com/example/owl/model), each containing static sample data exposed using fake `Repo`s objects. diff --git a/README.md b/README.md index 802737006d..d465d57839 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,51 @@ -# Compose Samples Repository +# Jetpack Compose Samples +Jetpack Compose Samples This repository contains a set of individual Android Studio projects to help you learn about - [Jetpack Compose](https://developer.android.com/jetpack/compose), Android's new modern UI toolkit. - - - -## Samples - -### [Jetnews](Jetnews/) -A sample blog post viewer that demonstrates a variety of UI components, light/dark themes and a basic architecture. - -### [Jetchat](Jetchat/) - -Todo(jalc) - -### [Jetsurvey](JetSurvey/) - -A sample survey app showcasing text input, validation and state handling. - -### [Jetsnack](Jetsnack/) - -A sample snack-ordering app showcasing how to implement a custom design system. - -### [Jetcaster](Jetcaster/) - -A sample podcast app showcasing dynamic theming and a full featured architecture. - -### [Owl](owl/) - -A sample education app showcasing theming with Material Design. - -### [Crane](Crane/) - -A sample travel app showcasing Material components, draggable UI elements, interop with Android Views -inside Compose and UI state handling. - -### [Rally](Rally/) - -Todo(jalc) - -## Requirements - -[Android Studio 4.2](https://developer.android.com/studio/preview/index.html) or newer. +Compose in Android. Each sample demonstrates different use cases, complexity levels and APIs. + +For more information, please [read the documentation](https://developer.android.com/jetpack/compose) + +💻 Requirements +------------ +[Android Studio 4.2 Canary](https://developer.android.com/studio/preview/index.html) or newer. + +🧬 Samples +------------ + + +| Project | | +|:-----|---------| +|
JetNews

A sample blog post viewer that demonstrates the use of Compose with a typical Material app and real-world architecture.

• Medium complexity
• Varied UI
• Light & dark themes
• Resource loading
• UI Testing

**[> Browse](JetNews/)**

| Jetnews sample demo | +| | | +|
Jetchat

A sample chat app that focuses on UI state patterns and text input.

• Low complexity
• Simple Material Design theme (Light & dark)
• Resource loading
• Back button handling
• Integration with Architecture Components: Navigation, Fragments, LiveData, ViewModel
• Animation
• UI Testing

**[> Browse](Jetchat/)**

| Jetchat sample demo| +| | | +|
Jetsurvey

A sample survey app that showcases text input, validation and UI state management in Compose.

• Low complexity
• `TextField` and form validation
• Snackbar implementation
• Element reusability and styling
• Various form elements


**[> Browse](Jetsurvey/)**

| Jetsurvey sample demo | +| | | +|
Jetsnack

Jetsnack is a sample snack ordering app built with Compose.

• Medium complexity
• Custom design system
• Custom layouts
• Animation

**[> Browse](Jetsnack/)**

| Jetsnack sample demo| +| | | +|
Jetcaster

A sample podcast app that features a full-featured, Redux-style architecture and showcases dynamic themes.

• Advanced sample
• Dynamic theming using podcast artwork
• Image fetching
• [`WindowInsets`](https://developer.android.com/reference/kotlin/android/view/WindowInsets) support
• Coroutines
• Local storage with Room

**[> Browse](Jetcaster/)**

| Jetcaster sample demo| +| | | +|
Rally

A Compose implementation of the Rally Material study, a financial app that focuses on data, charts, reusability and animations.

• Low complexity
• Material theming with a dark-only theme
• Custom layouts and reusable elementss
• Charts and tables
• Animations
• Screenshot tests

**[> Browse](Rally/)**

| Rally sample demo| +| | | +|
Crane

A Compose implementation of the Crane Material study, a travel app that uses Material Design components and Material Theming to create a personalized, on-brand experience.

• Medium complexity
• Draggable UI elements
• Android Views inside Compose
• UI state handling
• UI Tests

**[> Browse](Crane/)**

| Crane sample demo| +| | | +|
Owl

A Compose implementation of the Owl Material study. The Owl brand uses bold color, shape, and typography to express its brand attributes: energy, daring, and fun.

• Medium complexity
• Material theming & light/dark themes
• Custom layout
• Animation

**[> Browse](Owl/)**

| Owl sample demo| + + +## License +``` +Copyright 2020 The Android Open Source Project + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + https://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +``` diff --git a/Rally/README.md b/Rally/README.md index c1a07dee05..6629d9d1b5 100644 --- a/Rally/README.md +++ b/Rally/README.md @@ -45,7 +45,7 @@ fun AccountsBody(accounts: List) { ``` ### Theming -Rally follows [Material Design][materialtheming], customizing [colors](app/src/main/java/com/example/compose/rally/ui/theme/Color.kt) and [typography](app/src/main/java/com/example/compose/rally/ui/theme/Theme.kt) used in the app via the [RallyTheme](app/src/main/java/com/example/compose/rally/ui/theme/Theme.kt). Rally's design only contains a dark theme, therefore the theme does not contain any light colors. +Rally follows [Material Design][materialtheming], customizing [colors](app/src/main/java/com/example/compose/rally/ui/theme/Color.kt) and [typography](app/src/main/java/com/example/compose/rally/ui/theme/RallyTheme.kt) used in the app via the [RallyTheme](app/src/main/java/com/example/compose/rally/ui/theme/RallyTheme.kt). Rally's design only contains a dark theme, therefore the theme does not contain any light colors. ### Charts and animations This sample features a donut chart that combines drawing using [`Canvas`](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Canvas) with animations combining two animated parameters: `AngleOffset` and `Shift`. This creates the animation with minimum boilerplate: diff --git a/readme/crane.png b/readme/crane.png new file mode 100644 index 0000000000..15b91610e4 Binary files /dev/null and b/readme/crane.png differ diff --git a/readme/jetcaster.png b/readme/jetcaster.png new file mode 100644 index 0000000000..36597cae99 Binary files /dev/null and b/readme/jetcaster.png differ diff --git a/readme/jetchat.png b/readme/jetchat.png new file mode 100644 index 0000000000..58cdae706f Binary files /dev/null and b/readme/jetchat.png differ diff --git a/readme/jetnews.png b/readme/jetnews.png new file mode 100644 index 0000000000..f89cccb98f Binary files /dev/null and b/readme/jetnews.png differ diff --git a/readme/jetsnack.png b/readme/jetsnack.png new file mode 100644 index 0000000000..84710d05c3 Binary files /dev/null and b/readme/jetsnack.png differ diff --git a/readme/jetsurvey.png b/readme/jetsurvey.png new file mode 100644 index 0000000000..1f5fb1c435 Binary files /dev/null and b/readme/jetsurvey.png differ diff --git a/readme/owl.png b/readme/owl.png new file mode 100644 index 0000000000..4eaf06a252 Binary files /dev/null and b/readme/owl.png differ diff --git a/readme/rally.png b/readme/rally.png new file mode 100644 index 0000000000..2ded2a1c6b Binary files /dev/null and b/readme/rally.png differ diff --git a/screenshots/samples_montage.gif b/readme/samples_montage.gif similarity index 100% rename from screenshots/samples_montage.gif rename to readme/samples_montage.gif diff --git a/readme/screenshots/Crane.png b/readme/screenshots/Crane.png new file mode 100644 index 0000000000..d8a2f320f7 Binary files /dev/null and b/readme/screenshots/Crane.png differ diff --git a/readme/screenshots/JetNews.png b/readme/screenshots/JetNews.png new file mode 100644 index 0000000000..1aa151acef Binary files /dev/null and b/readme/screenshots/JetNews.png differ diff --git a/readme/screenshots/Jetcaster.png b/readme/screenshots/Jetcaster.png new file mode 100644 index 0000000000..ac0d281975 Binary files /dev/null and b/readme/screenshots/Jetcaster.png differ diff --git a/readme/screenshots/Jetchat.png b/readme/screenshots/Jetchat.png new file mode 100644 index 0000000000..8dd33d0bcf Binary files /dev/null and b/readme/screenshots/Jetchat.png differ diff --git a/readme/screenshots/Jetsnack.png b/readme/screenshots/Jetsnack.png new file mode 100644 index 0000000000..ffd69789e6 Binary files /dev/null and b/readme/screenshots/Jetsnack.png differ diff --git a/readme/screenshots/Jetsurvey.png b/readme/screenshots/Jetsurvey.png new file mode 100644 index 0000000000..2ba126a805 Binary files /dev/null and b/readme/screenshots/Jetsurvey.png differ diff --git a/readme/screenshots/Owl.png b/readme/screenshots/Owl.png new file mode 100644 index 0000000000..a83b698343 Binary files /dev/null and b/readme/screenshots/Owl.png differ diff --git a/readme/screenshots/Rally.png b/readme/screenshots/Rally.png new file mode 100644 index 0000000000..7dde9b8ab8 Binary files /dev/null and b/readme/screenshots/Rally.png differ