Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.backbase.android.design.banner.MoneyProtectionBannerView
import com.backbase.android.design.banner.MoneyProtectionBanner
import com.backbase.android.design.banner.MoneyProtectionBannerViewFactory
import android.content.Context
import android.view.LayoutInflater
Usage
Basic usage
Create a MoneyProtectionBannerView as a placeholder that will be populated with banner content through the factory pattern.
val bannerView = MoneyProtectionBannerView(context)
bannerView.bannerTag = "default"
XML usage
Use MoneyProtectionBannerView in XML layouts with custom attributes for tag-based banner configuration.
<com.backbase.android.design.banner.MoneyProtectionBannerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:bannerTag="identity"
app:background="@drawable/preview_background" />
Factory setup
Configure the banner factory at application level to define how banners are created for different tags.
MoneyProtectionBanner {
viewFactory = object : MoneyProtectionBannerViewFactory {
override fun createView(tag: String): View? = when (tag) {
"identity" -> createIdentityBanner()
"default" -> createDefaultBanner()
else -> null
}
}
}
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
bannerTag |
String |
"" |
bannerTag
The bannerTag parameter identifies which banner variant to display. This tag is passed to the MoneyProtectionBannerViewFactory to determine the specific banner content.
bannerView.bannerTag = "identity"
Factory pattern
MoneyProtectionBannerViewFactory
The MoneyProtectionBannerViewFactory interface defines how banner views are created based on tags.
interface MoneyProtectionBannerViewFactory {
fun createView(tag: String): View?
}
Implementation example
Create a custom factory implementation to handle different banner types:
class CustomBannerViewFactory(private val context: Context) : MoneyProtectionBannerViewFactory {
override fun createView(tag: String): View? = when (tag) {
"fdic" -> createFDICBanner()
"disclaimer" -> createDisclaimerBanner()
else -> null
}
private fun createFDICBanner(): View {
return LayoutInflater.from(context).inflate(R.layout.fdic_banner, null)
}
}
DSL configuration
Use the MoneyProtectionBanner DSL function to configure the factory at application startup:
MoneyProtectionBanner {
viewFactory = CustomBannerViewFactory(applicationContext)
}
Styling
Preview mode
In design-time preview mode, the component displays a background drawable to visualize the banner placeholder.
<com.backbase.android.design.banner.MoneyProtectionBannerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:background="@drawable/banner_preview" />
Dynamic content
The banner content is dynamically replaced based on the factory implementation. The view automatically removes existing content and adds the new banner view.
// When bannerTag is set, the factory creates and injects the appropriate view
bannerView.bannerTag = "promotional"
Design tokens
The MoneyProtectionBannerView component uses design tokens for consistent styling:
- Layout: Inherits FrameLayout behavior for flexible content positioning
- Background: Preview drawable for design-time visualization
- Content: Dynamically injected views follow their own design token patterns
// Factory-created views should use design tokens for consistency
private fun createBanner(): View {
val view = LayoutInflater.from(context).inflate(R.layout.custom_banner, null)
view.setBackgroundColor(context.getColor(R.color.banner_background))
return view
}