Import
View-based framework
Add separators to your layout files using standard Android View elements with predefined styles.
<!-- Add to your layout file -->
<View style="?attr/listItemSeparatorStyle" />
Usage
Basic usage
<!-- Basic list item separator with left margin -->
<View style="?attr/listItemSeparatorStyle" />
Advanced usage
<!-- Different separator styles in a layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- List item separator with margin -->
<View style="?attr/listItemSeparatorStyle" />
<!-- Full width section separator -->
<View style="?attr/listSectionSeparatorStyle" />
<!-- Centered separator with side margins -->
<View style="@style/Widget.Backbase.SeparatorCentered" />
</LinearLayout>
Configuration
|
Style |
Description |
Margins |
|---|---|---|
|
?attr/listItemSeparatorStyle |
List item separator |
Left margin: ?spacerMedium |
|
?attr/listSectionSeparatorStyle |
Section separator |
No margins |
|
@style/Widget.Backbase.SeparatorCentered |
Centered separator |
Start/End margins: ?spacerMedium |
listItemSeparatorStyle
Default separator style for list items with left margin spacing.
<!-- List item separator -->
<View style="?attr/listItemSeparatorStyle" />
listSectionSeparatorStyle
Full width separator style for section divisions without margins.
<!-- Section separator -->
<View style="?attr/listSectionSeparatorStyle" />
Widget.Backbase.SeparatorCentered
Centered separator style with equal margins on both sides.
<!-- Centered separator -->
<View style="@style/Widget.Backbase.SeparatorCentered" />
Styling
Predefined styles
The Separator provides three predefined styles for different layout needs.
|
Style |
Properties |
Description |
|---|---|---|
|
Widget.Backbase.ListItemSeparator |
Height: @dimen/bds_separator_height Background: ?colorBorderSubtle Left margin: ?spacerMedium |
List item separator with left margin |
|
Widget.Backbase.ListSectionSeparator |
Height: ?sizerXSmall Background: ?colorBorderSubtle Margins: None |
Section separator without margins |
|
Widget.Backbase.SeparatorCentered |
Height: @dimen/bds_separator_height Background: @color/bds_separator Start/End margins: ?spacerMedium |
Centered separator with side margins |
Custom styling
<!-- Custom separator with specific styling -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="@dimen/custom_margin"
android:layout_marginEnd="@dimen/custom_margin"
android:background="?colorBorderDefault" />
Accessibility
Accessibility configuration
Separators are typically decorative and should not be focusable for accessibility.
<!-- Separator with accessibility considerations -->
<View
style="?attr/listItemSeparatorStyle"
android:importantForAccessibility="no"
android:focusable="false" />
Best practices
- Most separators should have android:importantForAccessibility="no"
- Avoid making separators focusable unless they convey important structural information
- Use semantic layout structure instead of relying on visual separators for accessibility
- Consider using proper heading structures and content grouping for screen readers
Design tokens
The component uses Backbase design tokens for consistent theming.
Token group separator:
- bds_separator_height: Standard separator thickness
- colorBorderSubtle: Default separator color
- spacerMedium: Standard margin spacing
- sizerXSmall: Alternative separator height for sections