Skeleton

Default

Day	Night

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Skeleton components is built for an composition with shimmer animation. It is often used for a loading screen or loading cards. There is a shimmer overlay which is to wrap the whole composition. There are 4 base elements with pre-selected size or custom size support: image skeleton, circle skeleton, headline skeleton and body text skeleton, they represent the real block as their name in a composition. You should put the whole composition into a shimmer overlay to add shimmer animation.

The Skeleton components can be used in both XML and Kotlin/Java

Shimmer overlay support to add a child with component tree, or to include another layout XML file.

Example of a shimmer overlay with in XML

<net.skyscanner.backpack.skeleton.BpkShimmerOverlay
  android:layout_width="200dp"
  android:layout_height="wrap_content">
    <net.skyscanner.backpack.skeleton.BpkBodyTextSkeleton
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</net.skyscanner.backpack.skeleton.BpkShimmerOverlay>

<net.skyscanner.backpack.skeleton.BpkShimmerOverlay
  android:layout_width="200dp"
  android:layout_height="wrap_content">
    <include layout="@layout/skeleton_overlay_sample" />
</net.skyscanner.backpack.skeleton.BpkShimmerOverlay>

Circle skeleton have pre-selected size. skeletonCircleSize: small(32 dp), large(48 dp), custom. You could also specify a custom size by skeletonDiameter.

Example of a circle Skeleton with large size in XML

<net.skyscanner.backpack.skeleton.BpkCircleSkeleton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:skeletonCircleSize="large" />

Example of a circle skeleton with custom size in XML

<net.skyscanner.backpack.skeleton.BpkCircleSkeleton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:skeletonCircleSize="custom"
  app:skeletonDiameter="48dp" />

Image skeleton requires width and height dimension, you should specify them to get an expected size.

Example of a Image Skeleton with rounded corner in XML

<net.skyscanner.backpack.skeleton.BpkImageSkeleton
  android:layout_width="80dp"
  android:layout_height="80dp"
  app:skeletonCornerType="rounded" />

Headline skeleton have pre-selected height. skeletonHeadlineHeightSize: small(8 dp), medium(16 dp), large(32 dp), custom. Please set height to wrap_content if you want to use pre-selected height otherwise you could specify a custom height. If you want to set the height to a custom size, please set skeletonHeadlineHeightSize to custom and then set height to a dimension value. You should specify the width to any size to keep consistent with your design.

Example of a headline skeleton with medium size in XML

<net.skyscanner.backpack.skeleton.BpkHeadlineSkeleton
  android:layout_width="80dp"
  android:layout_height="wrap_content"
  app:skeletonHeadlineHeightSize="medium" />

Example of a headline skeleton with custom size in XML

<net.skyscanner.backpack.skeleton.BpkHeadlineSkeleton
  android:layout_width="80dp"
  android:layout_height="48dp"
  app:skeletonHeadlineHeightSize="custom" />

Body text skeleton have its own height(40 dp), you should never to reset it. You should only specify width for it, and set height to wrap_content.

Example of a body text skeleton in XML

<net.skyscanner.backpack.skeleton.BpkBodyTextSkeleton
  android:layout_width="200dp"
  android:layout_height="wrap_content" />

Example of a shimmer overlay in Kotlin

import net.skyscanner.backpack.skeleton.BpkShimmerOverlay
import net.skyscanner.backpack.skeleton.BpkImageSkeleton

val skeleton = BpkShimmerOverlay(context)
val image = BpkImageSkeleton(context)
skeleton.addView(image, context.resources.getDimensionPixelSize(R.dimen.bpkSpacingXl),
  context.resources.getDimensionPixelSize(R.dimen.bpkSpacingXl))

Example of a circle skeleton with large size in Kotlin

import net.skyscanner.backpack.skeleton.BpkCircleSkeleton

BpkCircleSkeleton(context).apply {
  size = BpkCircleSkeleton.CircleSize.Large
}

Example of a circle skeleton with custom size in Kotlin

import net.skyscanner.backpack.skeleton.BpkCircleSkeleton

BpkCircleSkeleton(context).apply {
  diameter = context.resources.getDimensionPixelSize(R.dimen.bpkSpacingXl)
}

Example of a image skeleton with rounded corner in Kotlin

import net.skyscanner.backpack.skeleton.BpkImageSkeleton

BpkImageSkeleton(context).apply {
  cornerType = BpkImageSkeleton.CornerType.Rounded
}

Example of a headline skeleton with medium size in Kotlin

import net.skyscanner.backpack.skeleton.BpkHeadlineSkeleton

BpkHeadlineSkeleton(context).apply {
  heightSize = BpkHeadlineSkeleton.SkeletonHeightSizeType.Medium
}

Example of a body text skeleton with large corner in Kotlin

import net.skyscanner.backpack.skeleton.BpkBodyTextSkeleton

BpkBodyTextSkeleton(context)