Import
View-based framework
Add the SummaryStackView to your layout file or configure it programmatically in Kotlin.
<!-- Add to your layout file -->
<com.backbase.android.design.header.SummaryStackView
android:id="@+id/summaryStackView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:textAlignment="center" />
If you need to reference the component or row types in your Kotlin code, import them at the top of your file.
import com.backbase.android.design.header.SummaryStackView
import com.backbase.android.design.header.SummaryStackRowText
import com.backbase.android.design.header.SummaryStackRowAmount
import com.backbase.android.design.header.SummaryStackRowIcon
import com.backbase.android.design.header.SummaryStackRowDeferredIcon
import com.backbase.android.design.header.SummaryStackRowBadge
import com.backbase.android.design.header.SummaryStackRowChip
import com.backbase.android.design.header.summaryStackRowTextPrimary
import com.backbase.android.design.header.summaryStackRowTextSecondary
Usage
Basic usage
Create a SummaryStackView in XML and populate it with rows programmatically using the buildSummaryStack or addSummaryStackRow methods.
// Basic summary stack with text and amount rows
val summaryStackView: SummaryStackView = findViewById(R.id.summaryStackView)
summaryStackView.buildSummaryStack(
listOf(
summaryStackRowTextPrimary("Account Balance"),
summaryStackRowTextSecondary("**** 5754"),
SummaryStackRowAmount(
amount = "5000.00".toBigDecimal(),
currency = "USD"
)
)
)
Advanced usage
// Summary stack with icon, text, amount, badge, and chip rows
val summaryStackView: SummaryStackView = findViewById(R.id.summaryStackView)
summaryStackView.verticalRowSpacing = 8
summaryStackView.buildSummaryStack(
listOf(
SummaryStackRowDeferredIcon(
icon = DeferredDrawable.Resource(R.drawable.ic_account),
iconStyle = R.attr.summaryStackIconWithBackgroundStyle
),
summaryStackRowTextPrimary("Premium Account"),
summaryStackRowTextSecondary("Last updated today"),
SummaryStackRowAmount(
amount = "15750.50".toBigDecimal(),
currency = "EUR"
),
SummaryStackRowBadge(text = "Active", badgeStyle = R.attr.badgeSuccessStyle),
SummaryStackRowChip(text = "Savings")
)
)
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
verticalRowSpacing |
Int |
0 |
verticalRowSpacing
The verticalRowSpacing property defines the vertical spacing in pixels between two rows. This spacing is applied as half top margin and half bottom margin on each row.
// Set vertical spacing between rows
val summaryStackView: SummaryStackView = findViewById(R.id.summaryStackView)
summaryStackView.verticalRowSpacing = 16
<!-- Set vertical spacing in XML -->
<com.backbase.android.design.header.SummaryStackView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:verticalRowSpacing="8dp" />
Methods
|
Method |
Signature |
Description |
|---|---|---|
|
buildSummaryStack |
(summaryStackRows: List<SummaryStackRow>): Unit |
Builds the stack view from a list of rows, replacing any existing content |
|
addSummaryStackRow |
(summaryStackRow: SummaryStackRow, atIndex: Int = -1): View |
Adds a single row at the specified index, or at the end if index is -1 |
|
removeSummaryStackRow |
(summaryStackRow: SummaryStackRow): Unit |
Removes the specified row from the stack |
buildSummaryStack
The buildSummaryStack method builds the header view based on a list of rows. It clears any existing rows and renders the new content.
// Build summary stack with multiple rows
summaryStackView.buildSummaryStack(
listOf(
summaryStackRowTextPrimary("Account Title"),
summaryStackRowTextSecondary("**** 5754"),
SummaryStackRowAmount(amount = "1000.00".toBigDecimal(), currency = "USD")
)
)
addSummaryStackRow
The addSummaryStackRow method inserts a new row at the specified index. If atIndex is -1 (default), the row is added at the end of the stack. The method returns the created view.
// Add a row at the end
summaryStackView.addSummaryStackRow(summaryStackRowTextPrimary("New Row"))
// Add a row at a specific position
summaryStackView.addSummaryStackRow(SummaryStackRowBadge(text = "Status"), atIndex = 2)
removeSummaryStackRow
The removeSummaryStackRow method removes an existing row from the stack by matching the row object.
// Create and add a row
val badgeRow = SummaryStackRowBadge(text = "Inactive")
summaryStackView.addSummaryStackRow(badgeRow)
// Remove the row later
summaryStackView.removeSummaryStackRow(badgeRow)
Row types
SummaryStackView supports multiple row types through the SummaryStackRow abstract class. Each row type creates a specific view component.
SummaryStackRowText
A text row that creates a MaterialTextView with configurable text style.
|
Parameter |
Type |
Default |
|---|---|---|
|
text |
CharSequence |
Required |
|
textStyle |
@AttrRes Int |
R.attr.summaryStackTextStyle |
|
contentDescription |
CharSequence |
text |
// Text row with default style
val textRow = SummaryStackRowText(text = "Account Name")
// Text row with custom style
val customTextRow = SummaryStackRowText(
text = "Custom Text",
textStyle = R.attr.summaryStackTextPrimaryStyle
)
Factory functions for text rows
Convenience functions are available for creating primary and secondary styled text rows.
// Primary text row (uses summaryStackTextPrimaryStyle)
val primaryRow = summaryStackRowTextPrimary("Account Title")
// Secondary text row (uses summaryStackTextSecondaryStyle)
val secondaryRow = summaryStackRowTextSecondary("**** 5754")
// With custom content description
val accessibleRow = summaryStackRowTextPrimary(
text = "Account Title",
contentDescription = "Account title: Savings Account"
)
SummaryStackRowAmount
An amount row that creates an AmountTextView for displaying formatted currency amounts.
|
Parameter |
Type |
Default |
|---|---|---|
|
amount |
BigDecimal |
Required |
|
currency |
String? |
Required (nullable) |
|
amountStyle |
@AttrRes Int |
R.attr.summaryStackAmountStyle |
|
contentDescription |
CharSequence |
Auto-generated from amount and currency |
// Amount row with currency
val amountRow = SummaryStackRowAmount(
amount = "5000.00".toBigDecimal(),
currency = "USD"
)
// Amount row with custom content description
val accessibleAmountRow = SummaryStackRowAmount(
amount = "1500.75".toBigDecimal(),
currency = "EUR",
contentDescription = "Balance: one thousand five hundred euros and seventy-five cents"
)
SummaryStackRowIcon
An icon row that creates an IconView for displaying drawable resources.
|
Parameter |
Type |
Default |
|---|---|---|
|
icon |
Drawable |
Required |
|
iconStyle |
@AttrRes Int |
R.attr.summaryStackIconStyle |
|
contentDescription |
CharSequence? |
null |
// Icon row with default style
val iconRow = SummaryStackRowIcon(
icon = ContextCompat.getDrawable(context, R.drawable.ic_account)!!
)
// Icon row with background style
val iconWithBg = SummaryStackRowIcon(
icon = ContextCompat.getDrawable(context, R.drawable.ic_account)!!,
iconStyle = R.attr.summaryStackIconWithBackgroundStyle,
contentDescription = "Account icon"
)
SummaryStackRowDeferredIcon
An icon row that uses DeferredDrawable for deferred resource resolution.
|
Parameter |
Type |
Default |
|---|---|---|
|
icon |
DeferredDrawable |
Required |
|
iconStyle |
@AttrRes Int |
R.attr.summaryStackIconStyle |
|
contentDescription |
DeferredText? |
null |
// Deferred icon row
val deferredIconRow = SummaryStackRowDeferredIcon(
icon = DeferredDrawable.Resource(R.drawable.ic_account),
iconStyle = R.attr.summaryStackIconWithBackgroundStyle
)
SummaryStackRowBadge
A badge row that creates a Badge component for displaying status labels.
|
Parameter |
Type |
Default |
|---|---|---|
|
text |
String |
Required |
|
badgeStyle |
@AttrRes Int |
R.attr.badgeNeutralStyle |
|
summaryStackRowStyle |
@AttrRes Int |
R.attr.summaryStackBadgeStyle |
|
contentDescription |
CharSequence |
text |
// Badge row with neutral style (default)
val neutralBadge = SummaryStackRowBadge(text = "Pending")
// Badge row with success style
val successBadge = SummaryStackRowBadge(
text = "Active",
badgeStyle = R.attr.badgeSuccessStyle
)
// Badge row with danger style
val dangerBadge = SummaryStackRowBadge(
text = "Inactive",
badgeStyle = R.attr.badgeDangerStyle
)
SummaryStackRowChip
A chip row that creates a Material Chip component with optional tokens for customization.
|
Parameter |
Type |
Default |
|---|---|---|
|
text |
String |
Required |
|
chipStyle |
@AttrRes Int |
R.attr.summaryStackChipStyle |
|
tokens |
Tokens |
Tokens() |
// Basic chip row
val chipRow = SummaryStackRowChip(text = "Category")
// Chip row with tokens
val customChipRow = SummaryStackRowChip(
text = "Clickable Chip",
tokens = summaryStackRowChipTokens {
isCloseIconVisible = false
clickListener = { /* Handle click */ }
contentDescription = "Category chip"
}
)
SummaryStackRowChip.Tokens
|
Property |
Type |
Default |
|---|---|---|
|
background |
DeferredColor? |
null |
|
chipIcon |
DeferredDrawable? |
null |
|
clickListener |
(() -> Unit)? |
null |
|
contentDescription |
String? |
null |
|
isCloseIconVisible |
Boolean? |
null |
// Chip with icon and click listener
val chipWithIcon = SummaryStackRowChip(
text = "Savings",
tokens = summaryStackRowChipTokens {
chipIcon = DeferredDrawable.Resource(R.drawable.ic_savings)
isCloseIconVisible = true
clickListener = { handleChipClick() }
}
)
Styling
Predefined styles
SummaryStackView and its row types use predefined styles from the design system theme.
|
Style attribute |
Description |
|---|---|
|
?summaryStackViewStyle |
Default style for the SummaryStackView container |
|
?summaryStackTextStyle |
Base style for text rows |
|
?summaryStackTextPrimaryStyle |
Primary text style (Subtitle2 Medium, default foreground color) |
|
?summaryStackTextSecondaryStyle |
Secondary text style (Body2, support foreground color) |
|
?summaryStackAmountStyle |
Amount text style (Headline4) |
|
?summaryStackBadgeStyle |
Badge container style |
|
?summaryStackChipStyle |
Chip style |
|
?summaryStackIconStyle |
Icon style without background |
|
?summaryStackIconWithBackgroundStyle |
Icon style with primary background |
Custom styling
Override default styles by specifying custom style attributes when creating row types.
// Text row with primary style
val primaryTextRow = SummaryStackRowText(
text = "Primary Text",
textStyle = R.attr.summaryStackTextPrimaryStyle
)
// Icon row with background
val iconRow = SummaryStackRowIcon(
icon = drawable,
iconStyle = R.attr.summaryStackIconWithBackgroundStyle
)
Accessibility
Best practices
- SummaryStackView extends LinearLayout and provides standard Android accessibility behavior
- Individual row content is accessible through their respective components
- Text content is automatically accessible to screen readers
- Use the contentDescription parameter on row types to provide meaningful labels when needed
// Configure accessible text row
val textRow = SummaryStackRowText(
text = "****5754",
contentDescription = "Account number ending in 5754"
)
// Configure accessible amount row
val amountRow = SummaryStackRowAmount(
amount = "5000.00".toBigDecimal(),
currency = "USD",
contentDescription = "Balance: five thousand US dollars"
)
// Configure accessible icon row
val iconRow = SummaryStackRowIcon(
icon = drawable,
contentDescription = "Savings account icon"
)
Design tokens
The SummaryStackView uses design tokens for consistent theming through the global theme.
Typography
- Primary text: ?textAppearanceSubtitle2Medium
- Secondary text: ?textAppearanceBody2
- Amount text: ?textAppearanceHeadline4
Colors
- Primary text: ?colorForegroundDefault
- Secondary text: ?colorForegroundSupport
- Amount text: ?colorForegroundDefault
Layout
- Icon size: ?sizerXLarge
- Default vertical row spacing: 0dp
- Layout gravity: center