- Welcome
- Getting started
- Latest updates
- Monthly updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- 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
- Info Banner
- 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
- Search Modal
- 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
- Contributing
Theming
All Backpack components have full theming support through through the theme provider component. In the render tree, all themeable components will have access to the provided theme, even when they are multiple levels deep.
Theming
Theming for supported components is done using the default Android theming mechanism.
Each supported component can be themed individually using the style property, or globally by setting {componentName}Style in your theme.
Example
Define a theme in themes.xml
<style name="MyCustomTheme" parent="AppTheme">
...
<item name="bpkSwitchStyle">@style/BpkSwitch.Red</item>
</style>
<style name="BpkSwitch.Red" parent="">
<item name="switchPrimaryColor">@color/bpkPanjin</item>
</style>
You can theme all instances of BpkSwitch in your app/activity by setting the theme to MyCustomTheme, or change it to a single view by either setting the style to @style/BpkSwitch.Red or to your custom theme.
For supported attributes check each component's documentation.
Themeable colours
Backpack supports theming the following colours:
- bpkPrimaryColor
Those can be accessed programmatically using the BpkTheme class.
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Oct 31, 2022, 13:28