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 version of Android Studio Arctic Fox. 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.
- 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
MapViewembedded in Compose and Compose buttons updating the Android View. Notice how you can also interact with theMapViewseamlessly.
Crane is a multi-activity app that showcases how navigating between activities can be done in Jetpack Compose.
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.
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}
When restricting the Key to Android apps, use androidx.compose.samples.crane as package name, and
A0:BD:B3:B6:F0:C4:BE:90:C6:9D:5F:4C:1D:F0:90:80:7F:D7:FE:1F as SHA-1 certificate fingerprint.
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.