Skip to content

Commit 83b7564

Browse files
author
Gurupreet Singh
committed
updated readme
1 parent 6804819 commit 83b7564

File tree

1 file changed

+4
-88
lines changed

1 file changed

+4
-88
lines changed

ThemingCodelab/README.md

Lines changed: 4 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,10 @@
1-
# Reply sample
1+
# Theming in Compose with Material 3 Codelab
22

3-
This sample is a [Jetpack Compose][compose] implementation of [Reply][reply], a material design study for adaptive design.
4-
5-
To try out this sample app, use the latest stable version
6-
of [Android Studio](https://developer.android.com/studio).
7-
[Resizeable Emulator](https://developer.android.com/about/versions/12/12L/get#resizable-emulator)
8-
You can clone this repository or import the
9-
project from Android Studio following the steps
10-
[here](https://developer.android.com/jetpack/compose/setup#sample).
11-
12-
This sample showcases:
13-
14-
* Adaptive apps for mobile, tablets and foldables
15-
* Material navigation components
16-
* [Material 3 theming][materialtheming] & dynamic colors.
17-
18-
## Design & Screenshots
19-
20-
<img src="screenshots/reply.gif"/>
21-
22-
<img src="screenshots/medium_and_large_display.png">
23-
24-
## Features
25-
26-
#### [Dynamic window resizing](app/src/main/java/com/example/reply/ui/ReplyApp.kt#74)
27-
The [WindowSizeClass](https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/WindowSizeClass) allows us to get to know about current device size and configuration
28-
and observe any changes in device size in case of orientation change or unfolding of device.
29-
30-
<img src="screenshots/dynamic_size.gif"/>
31-
32-
33-
#### [Dynamic fold detection](app/src/main/java/com/example/reply/ui/MainActivity.kt#56)
34-
The [WindowLayoutInfo](https://developer.android.com/reference/kotlin/androidx/window/layout/WindowLayoutInfo) let us observe all display features including [Folding Postures](app/src/main/java/com/example/reply/ui/utils/WindowStateUtils.kt)
35-
real-time whenever fold state changes to help us adjust our UI accordingly.
36-
37-
<img src="screenshots/fold_unfold.png">
38-
39-
40-
#### [Material 3 navigation components](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt)
41-
The sample provides usage of material navigation components depending on screen size and states. These components also are part of material guidelines for canonical layouts to improve user experience and ergonomics.
42-
* [`BottomNavigationBar`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#162) is used for compact devices with maximum of 5 navigation destinations.
43-
* [`NavigationRail`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#70) is used for medium size devices. It is also used along with [`ModalNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#73) when user want to see more content.
44-
* [`PermanentNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#153) is used for large devices or desktops when we have enough space to show navigation drawer content always.
45-
* Depending upon the different size and state of device correct [navigation type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#71) is chosen dynamically.
46-
47-
48-
<img src="screenshots/compact_medium_large_displays.png">
49-
50-
51-
52-
53-
#### [Material 3 Theming](app/src/main/java/com/example/reply/ui/theme)
54-
Reply is using brand new Material 3 [colors](app/src/main/java/com/example/reply/ui/theme/Color.kt), [typography](app/src/main/java/com/example/reoly/ui/theme/Type.kt) and [theming](app/src/main/java/com/example/reply/ui/theme/Theme.kt). It also supports both [light and dark mode]((app/src/main/java/com/example/reply/ui/theme/Theme.kt#95)) depending on system settings.
55-
[Material Theme builder](https://material-foundation.github.io/material-theme-builder/#/custom) is used to create material 3 theme and directly export it for Compose.
56-
57-
#### [Dynamic theming/Material You](app/src/main/java/com/example/reply/ui/theme/Theme.kt#100)
58-
On Android 12+ Reply supports Material You dynamic color, which extracts a custom color scheme from the device wallpaper. For older version of android it falls back to defined light and dark [color schemes](aapp/src/main/java/com/example/reply/ui/theme/Theme.kt#34)
59-
60-
61-
<img src="screenshots/dynamic_theming.png">
62-
63-
64-
65-
66-
#### [Inbox Screen](app/src/main/java/com/example/reply/ui/ReplyListContent.kt)
67-
Similar to navigation type, depending on device's size and state correct [content type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#72) is chosen, we can have [Inbox only](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#91) or [Inbox and thread detail](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#83) together. The content in inbox screen
68-
is adaptive and is switched between list only or list and detail page depending on the screen size available.
69-
70-
71-
<img src="screenshots/medium_and_large_display.png">
72-
73-
74-
75-
76-
#### [FAB & Material 3 components](app/src/main/java/com/example/reply/ui/ReplyListContent.kt)
77-
Reply is using all material 3 components including different type of FAB for different screen size and states.
78-
* [`LargeFloatingActionButton`](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#100) is used along with bottom navigation ber.
79-
* [`FloatingActionButton`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#87) is used with Navigation rail for medium to large tablets.
80-
* [`ExtendedFloatingActionButton`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#214) is used in Navigation drawer for large devices.
81-
82-
#### [Data](app/src/main/java/com/example/reply/data)
83-
Reply has static local data providers for [email](app/src/main/java/com/example/reply/data/local/LocalEmailsDataProvider.kt) and [account](app/src/main/java/com/example/reply/data/local/LocalAccountsDataProvider.kt) data. It is also using repository pattern where [EmailRepository](app/src/main/java/com/example/reply/data/EmailsRepository.kt)
84-
emits the flow of email from local data that is used in [ReplyHomeViewModel](app/src/main/java/com/example/reply/ui/ReplyHomeViewModel.kt) to observe
85-
it in view model scope. The `ViewModel` exposes this data to ReplyApp composable via [state flow](app/src/main/java/com/example/reply/ui/ReplyHomeViewModel.kt#34).
3+
This folder contains the source code for
4+
the [Theming in Compose with Material 3 Codelab](https://developer.android.com/codelabs/jetpack-compose-theming)
865

876
## License
7+
888
```
899
Copyright 2022 The Android Open Source Project
9010
@@ -100,7 +20,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10020
See the License for the specific language governing permissions and
10121
limitations under the License.
10222
```
103-
104-
[compose]: https://developer.android.com/jetpack/compose
105-
[reply]: https://m3.material.io/foundations/adaptive-design/overview
106-
[materialtheming]: https://m3.material.io/styles/color/dynamic-color/overview

0 commit comments

Comments
 (0)