New main README and project README fixes

Staged in https://github.com/JoseAlcerreca/compose-readme/blob/master/README.md

Change-Id: I6315cd1b7a33a01b165722404c7a83c85bd3fd71

Author: JoseAlcerreca

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
 

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
 

Jetsurvey/README.md

@@ -6,9 +6,7 @@ showcase text input, validation and state capabilities of Compose.
 
 Screenshots
 -----------
-<img src="/screenshots/welcome.png" width="425"/> <img src="/screenshots/light_signin.png" width="425"/> <img src="/screenshots/dark_signin.png" width="425"/>
-
-<img src="/screenshots/signup_error.png" width="425"/> <img src="/screenshots/survey.gif" width="425"/>
+ <img src="screenshots/survey.gif" width="425"/>
 
 ## Features
 

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.

README.md

@@ -1,44 +1,51 @@
-# Compose Samples Repository
+# Jetpack Compose Samples
+<img src="readme/samples_montage.gif" alt="Jetpack Compose Samples" width="1024" />
 
 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.
-
-<img src="screenshots/samples_montage.gif">
-
-## 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 | |
+|:-----|---------|
+|  <br><img src="readme/jetnews.png" alt="JetNews" width="240"></img> <br><br> A sample blog post viewer that demonstrates the use of Compose with a typical Material app and real-world architecture. <br><br> • Medium complexity<br>• Varied UI<br>• Light & dark themes<br>• Resource loading<br>• UI Testing <br><br> **[> Browse](JetNews/)**<br><br> | <img src="readme/screenshots/JetNews.png" width="320" alt="Jetnews sample demo"> |
+|  |  |
+|  <br><img src="readme/jetchat.png" alt="Jetchat" width="240"></img> <br><br>A sample chat app that focuses on UI state patterns and text input.<br><br>• Low complexity<br>• Simple Material Design theme (Light & dark)<br>• Resource loading<br>• Back button handling<br>• Integration with Architecture Components: Navigation, Fragments, LiveData, ViewModel<br>• Animation<br>• UI Testing<br><br>**[> Browse](Jetchat/)** <br><br> | <img src="readme/screenshots/Jetchat.png" width="320" alt="Jetchat sample demo">|
+|  |  |
+| <br><img src="readme/jetsurvey.png" alt="Jetsurvey" width="240"></img> <br><br>A sample survey app that showcases text input, validation and UI state management in Compose.<br><br>• Low complexity<br>• `TextField` and form validation<br>• Snackbar implementation<br>• Element reusability and styling<br>• Various form elements<br><br><br>**[> Browse](Jetsurvey/)** <br><br> | <img src="readme/screenshots/Jetsurvey.png" width="320" alt="Jetsurvey sample demo"> |
+|  |  |
+| <br><img src="readme/jetsnack.png" alt="Jetsnack" width="240"></img> <br><br>Jetsnack is a sample snack ordering app built with Compose.<br><br>• Medium complexity<br>• Custom design system<br>• Custom layouts<br>• Animation<br><br>**[> Browse](Jetsnack/)** <br><br>  | <img src="readme/screenshots/Jetsnack.png" width="320" alt="Jetsnack sample demo">|
+|  |  |
+| <br><img src="readme/jetcaster.png" alt="Jetcaster" width="240"></img> <br><br>A sample podcast app that features a full-featured, Redux-style architecture and showcases dynamic themes.<br><br>• Advanced sample<br>• Dynamic theming using podcast artwork<br>• Image fetching<br>• [`WindowInsets`](https://developer.android.com/reference/kotlin/android/view/WindowInsets) support<br>• Coroutines<br>• Local storage with Room<br><br>**[> Browse](Jetcaster/)** <br><br>  | <img src="readme/screenshots/Jetcaster.png" width="320" alt="Jetcaster sample demo">|
+|  |  |
+| <br><img src="readme/rally.png" alt="Rally" width="240"></img>  <br><br>A Compose implementation of the Rally Material study, a financial app that focuses on data, charts, reusability and animations.<br><br>• Low complexity<br>• Material theming with a dark-only theme<br>• Custom layouts and reusable elementss<br>• Charts and tables<br>• Animations<br>• Screenshot tests<br><br>**[> Browse](Rally/)** <br><br>  | <img src="readme/screenshots/Rally.png" width="320" alt="Rally sample demo">|
+|  |  |
+| <br><img src="readme/crane.png" alt="Crane" width="240"></img>  <br><br>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.<br><br>• Medium complexity<br>• Draggable UI elements<br>• Android Views inside Compose<br>• UI state handling<br>• UI Tests<br><br>**[> Browse](Crane/)** <br><br>  | <img src="readme/screenshots/Crane.png" width="320" alt="Crane sample demo">|
+|  |  |
+| <br><img src="readme/owl.png" alt="Owl" width="240"></img>  <br><br>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.<br><br>• Medium complexity<br>• Material theming & light/dark themes<br>• Custom layout<br>• Animation<br><br>**[> Browse](Owl/)** <br><br>  | <img src="readme/screenshots/Owl.png" width="320" alt="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.
+```

Rally/README.md

@@ -45,7 +45,7 @@ fun AccountsBody(accounts: List<Account>) {
 ```
 
 ### 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: