Jetchat is a sample chat app built with Jetpack Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here.
This sample showcases:
- UI state management
- Integration with Architecture Components: Navigation, Fragments, ViewModel
- Back button handling
- Text Input and focus management
- Multiple types of animations and transitions
- Saved state across configuration changes
- Material Design 3 theming and Material You dynamic color
- UI tests
Jetchat is still in under development, and some features are not yet implemented.
The ConversationContent composable is the entry point to this screen and takes a ConversationUiState that defines the data to be displayed. This doesn't mean all the state is served from a single point: composables can have their own state too. For an example, see scrollState in ConversationContent or currentInputSelector in UserInput
The ProfileFragment shows how to pass data between fragments with the Navigation component and observe state from a ViewModel, served via LiveData.
When the Emoji selector is shown, pressing back in the app closes it, intercepting any navigation events. The implementation can be found in UserInput.
When the Emoji panel is shown the keyboard must be hidden and vice versa. This is achieved with a combination of the FocusRequester and onFocusChanged APIs.
This sample uses animations ranging from simple AnimatedVisibility in FunctionalityNotAvailablePanel to choreographed transitions found in the FloatingActionButton of the Profile screen and implemented in AnimatingFabContent
This sample is laid out edge-to-edge, drawing its content behind the system bars for a more immersive look.
The sample also supports synchronized IME transitions when running on API 30+ devices. See the use of Modifier.navigationBarsPadding().imePadding() in ConversationContent.
Some composable state survives activity or process recreation, like currentInputSelector in UserInput.
Jetchat follows the Material Design 3 principles and uses the MaterialTheme composable and M3 components. On Android 12+ Jetchat supports Material You dynamic color, which extracts a custom color scheme from the device wallpaper. Jetchat uses a custom, branded color scheme as a fallback. It also implements custom typography using the Karla and Montserrat font families.
Jetchat contains an example of how to use rememberNestedScrollInteropConnection() to achieve successful nested scroll interop between a View parent that implements androidx.core.view.NestedScrollingParent3 and a Compose child. The example used here is a combination of a View parent CoordinatorLayout and a nested, Compose child BoxWithConstraints in ProfileFragment.
In androidTest you'll find a suite of UI tests that showcase interesting patterns in Compose:
UI tests for the Conversation screen. Includes a test that checks the behavior of the app when dark mode changes.
Shows how to write tests that assert directly on the Navigation Controller.
Checks that the user input composable, including extended controls, behave as expected showing and hiding the keyboard.
-
If the emoji selector is shown, clicking on the TextField can sometimes show both input methods. Tracked in https://issuetracker.google.com/164859446
-
There are only two profiles, clicking on anybody except "me" will show the same data.
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.