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.