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.calendar.CalendarButton
import java.time.LocalDate
Usage
Basic usage
Create a CalendarButton to provide date selection functionality with Material Design date picker integration.
val calendarButton = CalendarButton(context)
calendarButton.calendarTitle = "Select Date"
calendarButton.dateFormat = "dd/MM/yyyy"
XML usage
Use CalendarButton in XML layouts with custom attributes for calendar configuration.
<com.backbase.android.design.calendar.CalendarButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Select a date"
app:calendarTitle="Choose Date"
app:calendarDateFormat="dd MMM yyyy" />
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
calendarTitle |
String? |
"" |
|
dateFormat |
String? |
User's preferred format |
calendarTitle
The calendarTitle parameter sets the title displayed in the Material Date Picker dialog when the button is tapped.
calendarButton.calendarTitle = "Select Appointment Date"
dateFormat
The dateFormat parameter controls how the selected date is formatted and displayed on the button. Uses SimpleDateFormat pattern strings.
calendarButton.dateFormat = "MMM dd, yyyy"
Methods
addOnDateChangeListener
The addOnDateChangeListener method registers a callback that is invoked when a date is selected from the picker.
calendarButton.addOnDateChangeListener { selectedDate ->
// Handle date selection
println("Selected: $selectedDate")
}
removeAllOnDateChangeListener
The removeAllOnDateChangeListener method removes all registered date change listeners.
calendarButton.removeAllOnDateChangeListener()
removeOnDateChangeListener
The removeOnDateChangeListener method removes a specific date change listener.
val listener = { date: LocalDate -> println(date) }
calendarButton.addOnDateChangeListener(listener)
calendarButton.removeOnDateChangeListener(listener)
setCalendarBuilderInterceptor
The setCalendarBuilderInterceptor method allows customization of the Material Date Picker before it is shown.
calendarButton.setCalendarBuilderInterceptor { builder ->
builder.setTheme(R.style.CustomDatePickerTheme)
}
Date picker behavior
Automatic text updates
When a date is selected from the picker, the button's text is automatically updated to display the formatted date.
// After date selection, button text shows formatted date
calendarButton.dateFormat = "EEEE, MMMM dd, yyyy"
// Button will display: "Monday, January 15, 2024"
UTC timezone handling
All date operations are performed in UTC timezone to ensure consistent behavior across different device timezones.
// Dates are converted to LocalDate using UTC timezone
calendarButton.addOnDateChangeListener { localDate ->
// localDate is in UTC timezone
}
Styling
Material Design integration
The component uses Material Design's date picker with Backbase design system styling:
<com.backbase.android.design.calendar.CalendarButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?calendarButtonStyle"
android:hint="Select date" />
Custom date formats
Support for various date format patterns using SimpleDateFormat:
// Different format examples
calendarButton.dateFormat = "dd/MM/yyyy" // 15/01/2024
calendarButton.dateFormat = "MMM dd, yyyy" // Jan 15, 2024
calendarButton.dateFormat = "EEEE, dd MMMM" // Monday, 15 January
Design tokens
The CalendarButton component uses design tokens for consistent styling:
- Typography: Inherits MaterialTextView text styling and appearance
- Colors: Uses Material Design date picker theming
- Layout: Follows Material Design button sizing and touch targets
- Spacing: Consistent with Material Design spacing guidelines
// Component automatically applies design system styling
calendarButton.setTextAppearance(R.style.TextAppearance_Backbase_Body1)