Crane

Crane sample

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 Arctic Fox. You can clone this repository or import the project from Android Studio following the steps here.

Screenshots

Features

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.
• 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 is a multi-activity app that showcases how navigating between activities can be done in Jetpack Compose.

Hilt

Crane uses Hilt to manage its dependencies. Hilt's ViewModel (with the @HiltViewModel 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:

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

@Composable
fun CraneHomeContent(
    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.

Google Maps SDK

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}

Images

Image resources are retrieved from Unsplash.

Testing

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.

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.