Skip to content

Latest commit

 

History

History
112 lines (79 loc) · 6.71 KB

README.md

File metadata and controls

112 lines (79 loc) · 6.71 KB
Raw

Jetchat sample

Jetchat is a sample chat app built with Jetpack Compose.

To try out these sample apps, you need to use the latest Canary version of Android Studio 4.2. 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

Status: 🚧 In progress

Jetchat is still in under development, and some features are not yet implemented.

Features

UI State management

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

Architecture Components

The ProfileFragment shows how to pass data between fragments with the Navigation component and observe state from a ViewModel, served via LiveData.

Back button handling

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.

Text Input and focus management

When the Emoji panel is shown the keyboard must be hidden and vice versa. This is achieved with a combination of the FocusRequester and FocusObserver APIs.

Multiple types of animations and transitions

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

Edge-to-edge UI with synchronized IME transitions

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.

Saved state across configuration changes

Some composable state survives activity or process recreation, like currentInputSelector in UserInput.

Basic Material Design theming

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:

UserInput

@Composable
fun getSelectorExpandedColor(): Color {
    return if (MaterialTheme.colors.isLight) {
        MaterialTheme.colors.compositedOnSurface(0.04f)
    } else {
        MaterialTheme.colors.elevatedSurface(8.dp)
    }
}

UI tests

In androidTest you'll find a suite of UI tests that showcase interesting patterns in Compose:

ConversationTest

UI tests for the Conversation screen. Includes a test that checks the behavior of the app when dark mode changes.

NavigationTest

Shows how to write tests that assert directly on the Navigation Controller.

UserInputTest

Checks that the user input composable, including extended controls, behave as expected showing and hiding the keyboard.

Known issues

  1. If the emoji selector is shown, clicking on the TextField can sometimes show both input methods. Tracked in https://issuetracker.google.com/164859446

  2. There are only two profiles, clicking on anybody except "me" will show the same data.

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.