Import
View-based framework
Add the PaymentCardView to your layout file or create it programmatically in your Activity or Fragment.
<!-- Add to your layout file -->
<com.backbase.android.design.card.PaymentCardView
android:id="@+id/payment_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Usage
Basic usage
Configure a PaymentCardView with card information through XML attributes or programmatically.
<!-- Basic payment card configuration -->
<com.backbase.android.design.card.PaymentCardView
android:id="@+id/payment_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardPan="**** **** **** 1234"
app:cardHolderName="John Doe"
app:cardExpiry="12/25"
app:cardExpiryLabel="Valid Thru"
app:cardType="CREDIT" />
// Programmatic configuration
val paymentCard = findViewById<PaymentCardView>(R.id.payment_card_view)
paymentCard.cardPanTextView.text = "**** **** **** 1234"
paymentCard.cardHolderNameTextView.text = "John Doe"
paymentCard.cardExpiryTextView.text = "12/25"
paymentCard.cardExpiryLabelTextView.text = "Valid Thru"
paymentCard.cardTypeTextView.text = "CREDIT"
Advanced usage
class PaymentActivity : AppCompatActivity() {
private lateinit var paymentCard: PaymentCardView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_payment)
paymentCard = findViewById(R.id.payment_card_view)
setupPaymentCard()
}
private fun setupPaymentCard() {
// Configure card content
paymentCard.cardPanTextView.text = "**** **** **** 7559"
paymentCard.cardHolderNameTextView.text = "Glenn N. Keim"
paymentCard.cardExpiryLabelTextView.text = "Valid Thru"
paymentCard.cardExpiryTextView.text = "11/26"
paymentCard.cardTypeTextView.text = "CREDIT"
paymentCard.cardCvvTextView.text = "060"
// Configure logos
paymentCard.leftTopImageView.setImageResource(R.drawable.bank_logo)
paymentCard.rightTopImageView.setImageResource(R.drawable.ic_mastercard)
paymentCard.rightMiddleImageView.setImageResource(R.drawable.ic_contactless)
paymentCard.rightBottomImageView.setImageResource(R.drawable.ic_visa)
// Configure background
paymentCard.backgroundImageView.setImageResource(R.drawable.card_gradient_bg)
paymentCard.backSideBackgroundImageView.setImageResource(R.drawable.card_back_bg)
// Configure flip behavior
paymentCard.isFlippable = true
paymentCard.useAnimation = true
// Set flip listener
paymentCard.flipListener = { cardSide ->
when (cardSide) {
PaymentCardSide.FRONT -> handleFrontSide()
PaymentCardSide.BACK -> handleBackSide()
}
}
// Configure virtual card
paymentCard.isVirtual = true
// Configure locked state
paymentCard.isLocked = true
paymentCard.disabledTextView.text = "LOCKED"
paymentCard.disabledImageView.setImageResource(R.drawable.ic_lock)
}
private fun handleFrontSide() {
// Handle front side display
}
private fun handleBackSide() {
// Handle back side display
}
}
Programmatic creation
// Create payment card programmatically
val paymentCard = PaymentCardView(context).apply {
cardPanTextView.text = "**** **** **** 1234"
cardHolderNameTextView.text = "Jane Smith"
isFlippable = true
isVirtual = false
}
// Add to parent layout
parentLayout.addView(paymentCard)
Configuration
Constructors
|
Constructor |
Description |
|---|---|
|
PaymentCardView(context: Context, attrs: AttributeSet?, defStyle: Int) |
Creates a payment card view with optional XML attributes and default style |
PaymentCardView(context: Context, attrs: AttributeSet?, defStyle: Int)
Creates a PaymentCardView with the specified context, optional XML attributes, and default style. This constructor uses @JvmOverloads to provide multiple calling options.
// Programmatic creation with default styling
val paymentCard = PaymentCardView(context)
// Creation from XML attributes
// <com.backbase.android.design.card.PaymentCardView ... />
// Creation with custom default style
val customCard = PaymentCardView(context, null, R.attr.customPaymentCardStyle)
Properties
|
Property |
Type |
Default |
|---|---|---|
|
backgroundImageView |
ShapeableImageView |
Configured instance |
|
backSideBackgroundImageView |
ShapeableImageView |
Configured instance |
|
cardCvvTextView |
MaterialTextView |
Configured instance |
|
cardExpiryLabelTextView |
MaterialTextView |
Configured instance |
|
cardExpiryTextView |
MaterialTextView |
Configured instance |
|
cardHolderNameTextView |
MaterialTextView |
Configured instance |
|
cardPanTextView |
MaterialTextView |
Configured instance |
|
cardTypeTextView |
MaterialTextView |
Configured instance |
|
clickListener |
(() -> Unit)? |
null |
|
disabledImageView |
ShapeableImageView |
Configured instance |
|
disabledTextView |
MaterialTextView |
Configured instance |
|
flipListener |
((PaymentCardSide) -> Unit)? |
null |
|
isFlippable |
Boolean |
true |
|
isLocked |
Boolean |
false |
|
isNotchForcedEnabled |
Boolean |
false |
|
isVirtual |
Boolean |
false |
|
leftTopImageView |
ShapeableImageView |
Configured instance |
|
notchBackground |
Drawable? |
null |
|
rightBottomImageView |
ShapeableImageView |
Configured instance |
|
rightMiddleImageView |
ShapeableImageView |
Configured instance |
|
rightTopImageView |
ShapeableImageView |
Configured instance |
|
useAnimation |
Boolean |
true |
backgroundImageView
The background image view for the front side of the card.
// Set background image
paymentCard.backgroundImageView.setImageResource(R.drawable.card_background)
paymentCard.backgroundImageView.scaleType = ImageView.ScaleType.CENTER_CROP
backSideBackgroundImageView
The background image view for the back side of the card.
// Set back side background
paymentCard.backSideBackgroundImageView.setImageResource(R.drawable.card_back_bg)
cardCvvTextView
The card CVV text view that exists on the back side of the card.
// Set CVV
paymentCard.cardCvvTextView.text = "123"
cardExpiryLabelTextView
The card expiry date label text view.
// Set expiry label
paymentCard.cardExpiryLabelTextView.text = "Valid Until"
cardExpiryTextView
The expiry date value text view.
// Set expiry date
paymentCard.cardExpiryTextView.text = "12/29"
cardHolderNameTextView
The card holder name text view.
// Set cardholder name
paymentCard.cardHolderNameTextView.text = "Ricardo Jones Peterson"
cardPanTextView
The card PAN (Primary Account Number) text view.
// Set card number
paymentCard.cardPanTextView.text = "**** **** **** 1234"
cardTypeTextView
The card type text view.
// Set card type
paymentCard.cardTypeTextView.text = "DEBIT"
clickListener
Card click event listener used to receive click events when the card is not flippable.
// Set click listener
paymentCard.clickListener = {
// Handle card click when not flippable
showCardDetails()
}
disabledImageView
The disabled/notch icon image view.
// Set disabled icon
paymentCard.disabledImageView.setImageResource(R.drawable.ic_lock)
disabledTextView
The disabled/notch text view.
// Set disabled text
paymentCard.disabledTextView.text = "CARD DISABLED"
flipListener
Flip event listener triggered when the card flip animation is finished.
// Set flip listener
paymentCard.flipListener = { cardSide ->
when (cardSide) {
PaymentCardSide.FRONT -> {
// Card flipped to front
}
PaymentCardSide.BACK -> {
// Card flipped to back
}
}
}
isFlippable
Boolean to enable or disable card flipping animation when clicked.
// Enable flipping
paymentCard.isFlippable = true
// Disable flipping
paymentCard.isFlippable = false
isLocked
Boolean to configure whether the notch is displayed based on card lock state.
// Lock the card (shows notch)
paymentCard.isLocked = true
// Unlock the card (hides notch)
paymentCard.isLocked = false
isNotchForcedEnabled
Boolean to force display the notch always, independent of the isLocked flag state.
// Force notch to always show
paymentCard.isNotchForcedEnabled = true
isVirtual
Boolean to show or hide the virtual card tag.
// Show virtual tag
paymentCard.isVirtual = true
// Hide virtual tag
paymentCard.isVirtual = false
leftTopImageView
The image view on the top left of the card.
// Set left top logo
paymentCard.leftTopImageView.setImageResource(R.drawable.bank_logo)
notchBackground
The background drawable for the notch view.
// Set notch background
paymentCard.notchBackground = ContextCompat.getDrawable(context, R.drawable.notch_bg)
rightBottomImageView
The image view on the bottom right of the card.
// Set right bottom logo
paymentCard.rightBottomImageView.setImageResource(R.drawable.ic_visa)
rightMiddleImageView
The image view on the middle right of the card.
// Set right middle logo
paymentCard.rightMiddleImageView.setImageResource(R.drawable.ic_contactless)
rightTopImageView
The image view on the top right of the card.
// Set right top logo
paymentCard.rightTopImageView.setImageResource(R.drawable.ic_mastercard)
useAnimation
Boolean to enable or disable animation during card flip.
// Enable flip animation
paymentCard.useAnimation = true
// Disable flip animation
paymentCard.useAnimation = false
Styling
Predefined styles
|
Style |
Description |
|---|---|
|
Widget.Backbase.PaymentCard.Container |
Default payment card container style extending MaterialComponents CardView |
Custom styling
<!-- Custom payment card style in styles.xml -->
<style name="CustomPaymentCardStyle" parent="Widget.Backbase.PaymentCard.Container">
<item name="cardCornerRadius">12dp</item>
<item name="frontSideBackgroundScaleType">centerCrop</item>
<item name="backSideBackgroundScaleType">fitXY</item>
</style>
<!-- Apply custom style in theme.xml -->
<item name="paymentCardContainerStyle">@style/CustomPaymentCardStyle</item>
Background scale types
Configure how background images are scaled on front and back sides.
// Set scale types programmatically
paymentCard.backgroundImageView.scaleType = ImageView.ScaleType.CENTER_CROP
paymentCard.backSideBackgroundImageView.scaleType = ImageView.ScaleType.FIT_XY
<!-- Set scale types via XML -->
<com.backbase.android.design.card.PaymentCardView
android:id="@+id/payment_card_view"
app:frontSideBackgroundScaleType="centerCrop"
app:backSideBackgroundScaleType="matrix" />
Virtual card customization
<!-- Customize virtual card message -->
<item name="paymentCardViewVirtualCardMessage">@string/custom_virtual_text</item>
<!-- Customize virtual tag style -->
<item name="paymentCardVirtualTagStyle">@style/CustomVirtualTagStyle</item>
Accessibility
PaymentCardView automatically supports accessibility features for card information and interactions.
Best practices
- All text views are automatically accessible to screen readers.
- Card flip functionality is accessible through touch exploration.
- Image views should have appropriate content descriptions when they convey important information.
- Ensure sufficient color contrast between text and background images.
// Configure accessibility
paymentCard.cardPanTextView.contentDescription = "Card number ending in 1234"
paymentCard.cardHolderNameTextView.contentDescription = "Cardholder name: John Doe"
paymentCard.disabledImageView.contentDescription = "Card is locked"
// Accessibility is automatically handled for:
// - Text content reading
// - Card flip gestures
// - State announcements
Design tokens
This component uses design tokens for consistent theming:
- Corner radius: 16dp (default from Widget.Backbase.PaymentCard.Container).
- Maximum width: 350dp (bds_payment_card_max_width).
- Minimum width: 300dp (bds_payment_card_min_width).
- Height to width ratio: 0.617.
- Background scale types: fitXY (default for both front and back).
- Card elevation: Inherited from MaterialComponents CardView.
- Virtual tag styling: Configurable via paymentCardVirtualTagStyle.
- Notch background: Configurable via notchBackground property.