Jetchat is a sample chat app built with Jetpack Compose.
To try out this sample app, you need to use the latest version of Android Studio Arctic Fox 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
- Basic Material Design theming
- 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. This feature shows a way to integrate Compose and APIs from the Android Framework like OnBackPressedDispatcherOwner via Ambients. The implementation can be found in ConversationUiState.
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.navigationBarsWithImePadding() in ConversationContent.
The sample uses the Accompanist Insets library for WindowInsets support.
Some composable state survives activity or process recreation, like currentInputSelector in UserInput.
Jetchat follows the Material Design principles and uses the MaterialTheme ambient, with custom light and dark themes. In some cases colors it might be necessary to create additional colors, that can be specified as an overlay or combination of two, or as a specific elevation in dark mode. Jetchat uses some convenient extensions on the Material palette and can be used as follows:
@Composable
fun getSelectorExpandedColor(): Color {
return if (MaterialTheme.colors.isLight) {
MaterialTheme.colors.compositedOnSurface(0.04f)
} else {
MaterialTheme.colors.elevatedSurface(8.dp)
}
}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.