Backpack Android
Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.
Backpack for Android supports two targets: Android View system and Jetpack Compose.
Demo application
The Backpack demo application is a good way of referring to the variants available for a component and their correct usage.
The code is available under /app
directory.
The app can be downloaded from App Center
or by scanning the QR code below.
Installation
Backpack is available through Maven Central. Thus, before adding Backpack to your project,
make sure Maven Central is in your repositories list. Add this to your root build.gradle
:
repositories {
mavenCentral()
}
Add the following dependencies to your build.gradle
(in your app module) in the dependencies
block:
implementation "net.skyscanner.backpack:backpack-android:bpkVersion" // for Android View system
implementation "net.skyscanner.backpack:backpack-compose:bpkVersion" // for Compose
All Backpack components must to be used within BpkTheme
scope:
Android View system:
<style name="AppTheme" parent="BpkTheme">
<!-- Customize your theme here. -->
</style>
Compose:
BpkTheme {
BpkText("Hello from Compose!")
}
Features
Android View system
You can find the list of the available components, as well as the code samples and the screenshots here.
All design system tokens exist as public Android resources. Here's the list of the token types and the samples of its usage:
- border radii –
@dimen/bpkBorderRadiusSm
(XML),R.dimen.bpkBorderRadiusSm
(Java/Kotlin) - colours –
@color/bpkSkyBlue
(XML),R.color.bpkSkyBlue
(Java/Kotlin) - semantic colours –
@color/bpkTextPrimary
(XML),R.color.bpkTextPrimary
(Java/Kotlin) - elevations –
@dimen/bpkElevationSm
(XML),R.dimen.bpkElevationSm
(Java/Kotlin) - spacings –
@dimen/bpkSpacingLg
(XML),R.dimen.bpkSpacingLg
(Java/Kotlin) - text styles –
?bpkTextBaseSize
(XML)
Jetpack Compose
Backpack for Compose targets stable Compose releases.
You can find the list of the available components, as well as the code samples and the screenshots here.
The design system tokens are located in a net.skyscanner.backpack.compose.tokens
package.
Here's the list of the token types and the samples of its usage:
- border radii –
BpkBorderRadius.Lg
- border sizes –
BpkBorderSize.Sm
- colours –
BpkColor.SkyBlue
- semantic colours –
BpkTheme.colors.textPrimary
- elevations –
BpkElevation.Sm
- spacings –
BpkSpacing.Sm
- text styles –
BpkTheme.typography.heading4
Contributing to Backpack
Please see the Contributing guide for instructions on contributing to this project.
License
Backpack is available under the Apache 2.0 license. See the LICENSE file for more info.