pietmau / backpack-android

Backpack Design System

Backpack Android

Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.

Installation

Backpack is available through Jitpack. To install all of it, add the following line to your build.gradle (in your app module) in the dependencies block:

implementation 'com.github.skyscanner:backpack-android:23.4.0'

If your app resolves dependencies through Jitpack you're all set, if not add in your root build.gradle

repositories {
    maven { url 'https://jitpack.io' }
}

Note that Backpack is expected to be used with AndroidX. Please refer to AndroidX migration guide to setup.

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 HockeyApp or by scanning the QR code below.

Components

• Badge
• Bottom Nav
• Button
• Card
• Calendar
• Checkbox
• Chip
• Dialog
• Horizontal Nav
• Floating Action Button
• Interactive Star Rating
• Nav Bar
• Panel
• Rating
• Snackbar
• Spinner
• Star Rating
• Switch
• Text
• Text Field
• Text Spans
• Toast

Usage

Radii

The Backpack radii tokens are available as dimension resource.

The supported tokens are

• bpkBorderRadiusSm
• bpkBorderRadiusPill

Elevation

The Backpack elevation tokens are available as dimension resource.

The supported tokens are

• bpkElevationXs
• bpkElevationSm
• bpkElevationBase
• bpkElevationLg
• bpkElevationXl

Text Styles

The Backpack text styles are available as style resources.

The supported styles are

• bpkTextXs
• bpkTextXsEmphasized
• bpkTextSm
• bpkTextSmEmphasized
• bpkTextBase
• bpkTextBaseEmphasized
• bpkTextLg
• bpkTextLgEmphasized
• bpkTextXl
• bpkTextXlEmphasized
• bpkTextXl
• bpkTextXlEmphasized
• bpkTextXxl
• bpkTextXxlEmphasized

Color

<TextView
  android:text="This is Backpack Blue 500!"
  android:textColor="@color/bpkSkyBlue" />

R.color.bpkSkyBlue

Gradient

The Backpack gradient component is available with the BPKGradient utility class. It accepts the direction of the gradient as an optional parameter.

BpkGradients.getPrimary(context);
BpkGradients.getPrimary(context, GradientDrawable.Orientation.LEFT_RIGHT);

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.