Reply sample

This sample is a Jetpack Compose implementation of Reply, a material design study for adaptive design.

To try out this sample app, use the latest stable version of Android Studio. Resizeable Emulator You can clone this repository or import the project from Android Studio following the steps here.

This sample showcases:

Adaptive apps for mobile, tablets and foldables
Material navigation components
Material 3 theming & dynamic colors.

Design & Screenshots

Features

Dynamic window resizing

The WindowSizeClass allows us to get to know about current device size and configuration and observe any changes in device size in case of orientation change or unfolding of device.

Dynamic fold detection

The WindowLayoutInfo let us observe all display features including Folding Postures real-time whenever fold state changes to help us adjust our UI accordingly.

Material 3 navigation components

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.

BottomNavigationBar is used for compact devices with maximum of 5 navigation destinations.
NavigationRail is used for medium size devices. It is also used along with ModalNavigationDrawer when user want to see more content.
PermanentNavigationDrawer is used for large devices or desktops when we have enough space to show navigation drawer content always.
Depending upon the different size and state of device correct navigation type is chosen dynamically.

Material 3 Theming

Reply is using brand new Material 3 colors, typography and theming. It also supports both light and dark mode depending on system settings. Material Theme builder is used to create material 3 theme and directly export it for Compose.

Dynamic theming/Material You

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

Inbox Screen

Similar to navigation type, depending on device's size and state correct content type is chosen, we can have Inbox only or Inbox and thread detail together. The content in inbox screen is adaptive and is switched between list only or list and detail page depending on the screen size available.

FAB & Material 3 components

Reply is using all material 3 components including different type of FAB for different screen size and states.

LargeFloatingActionButton is used along with bottom navigation ber.
FloatingActionButton is used with Navigation rail for medium to large tablets.
ExtendedFloatingActionButton is used in Navigation drawer for large devices.

Data

Reply has static local data providers for email and account data. It is also using repository pattern where EmailRepository emits the flow of email from local data that is used in ReplyHomeViewModel to observe it in view model scope. The ViewModel exposes this data to ReplyApp composable via state flow.

License

Copyright 2022 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.