Crane is a travel app part of the Material Studies built with Jetpack Compose. The goal of the sample is to showcase Material components, draggable UI elements, Android Views inside Compose, and UI state handling.

To try out this sample app, 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 contains 4 screens:

• Landing screen that fades out after 2 seconds then slides the main content in from the bottom of the screen.
• Home screen where you can explore flights, hotels, and restaurants specifying the number of people.
• Clicking on the number of people refreshes the destinations.
• The backdrop is draggable and can pin to the top of the screen, just under the search criteria, and to the bottom. Implemented here.
• Destination's images are retrieved using the coil-accompanist library.
• Calendar screen. Tapping on Select Dates takes you to a calendar built completely from scratch. It makes a heavy usage of Compose's state APIs.
• Destination's Details screen. When tapping on a destination, a new screen implemented using a different Activity will be displayed. In there, you can see the a MapView embedded in Compose and Compose buttons updating the Android View. Notice how you can also interact with the MapView seamlessly.

Crane uses Hilt to manage its dependencies. The Hilt's ViewModel extension (with the @ViewModelInject annotation) works perfectly with Compose's ViewModel integration (viewModel() composable function) as you can see in the following snippet of code. viewModel() will automatically use the factory that Hilt creates for the ViewModel:

class MainViewModel @ViewModelInject constructor(
    private val destinationsRepository: DestinationsRepository,
    @DefaultDispatcher private val defaultDispatcher: CoroutineDispatcher,
    datesRepository: DatesRepository
) : ViewModel() { ... }

@Composable
fun CraneHomeContent(...) {
    val viewModel: MainViewModel = viewModel()
    ...
}

Disclaimer: Passing dependencies to a ViewModel which are not available at compile time (which is sometimes called assisted injection) doesn't work as you might expect using viewModel(). Compose's ViewModel integration cannot currently scope a ViewModel to a given composable. Instead it is always scoped to the host Activity or Fragment. This means that calling viewModel() with different factories in the same host Activity/Fragment don't have the desired effect; the first factory will be always used.

This is the case of the DetailsViewModel, which takes the name of a City as a parameter to load the required information for the screen. However, the above isn't a problem in this sample, since DetailsScreen is always used in it's own newly launched Activity.

To get the MapView working, you need to get an API key as the documentation says, and include it in the local.properties file as follows:

google.maps.key={insert_your_api_key_here}

The data is hardcoded in the CraneData file and exposed to the UI using the MainViewModel. Image resources are retrieved from Unsplash.

Crane has Compose-only tests (e.g. HomeTest) but also tests covering Compose and the view-based system (e.g. DetailsActivityTest). The latter uses the onActivity method of the ActivityScenarioRule to access information from the MapView.

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.