- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card List
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Infinite scroll
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Scrollable calendar
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
Skeleton
Skeleton components provides a standard way to build a skeleton loading view with shimmer animation.
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)
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Oct 31, 2022, 13:37