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)