Import
XML Layout
Add to your layout XML:
<com.backbase.android.design.calendar.CalendarButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?calendarButtonStyle" />
Kotlin
import com.backbase.android.design.calendar.CalendarButton
Usage
Basic usage
A simple calendar button with default styling.
<com.backbase.android.design.calendar.CalendarButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?calendarButtonStyle"
android:text="Select date" />
Advanced usage
Calendar button with custom title and date format.
<com.backbase.android.design.calendar.CalendarButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?calendarButtonStyle"
android:text="Choose appointment date"
app:calendarTitle="Select Appointment Date"
app:calendarDateFormat="MMM dd, yyyy" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:text |
String |
null |
|
app:calendarTitle |
String |
"" |
|
app:calendarDateFormat |
String |
"M/d/yy" (or user's preferred format) |
android:text
The text displayed on the button, updated when a date is selected.
<com.backbase.android.design.calendar.CalendarButton
android:text="Select your date"
style="?calendarButtonStyle" />
app:calendarTitle
The title displayed in the date picker dialog.
<com.backbase.android.design.calendar.CalendarButton
app:calendarTitle="Choose Date"
style="?calendarButtonStyle" />
app:calendarDateFormat
The format pattern used to display the selected date.
<com.backbase.android.design.calendar.CalendarButton
app:calendarDateFormat="dd/MM/yyyy"
style="?calendarButtonStyle" />
Programmatic configuration
|
Method |
Type |
Description |
|---|---|---|
|
addOnDateChangeListener |
(LocalDate) -> Unit |
Adds date change listener |
|
removeOnDateChangeListener |
(LocalDate) -> Unit |
Removes specific listener |
|
removeAllOnDateChangeListener |
() -> Unit |
Removes all listeners |
|
setCalendarBuilderInterceptor |
(MaterialDatePicker.Builder<Long>) -> Unit |
Customizes date picker |
addOnDateChangeListener
Listen for date selection changes.
val calendarButton = findViewById<CalendarButton>(R.id.calendar_button)
calendarButton.addOnDateChangeListener { selectedDate ->
println("Date selected: $selectedDate")
// Handle date selection
}
removeOnDateChangeListener
Remove a specific date change listener.
val listener: (LocalDate) -> Unit = { date ->
println("Date: $date")
}
calendarButton.addOnDateChangeListener(listener)
// Later remove it
calendarButton.removeOnDateChangeListener(listener)
removeAllOnDateChangeListener
Remove all registered date change listeners.
calendarButton.removeAllOnDateChangeListener()
setCalendarBuilderInterceptor
Customize the Material Date Picker configuration.
calendarButton.setCalendarBuilderInterceptor { builder ->
// Set date constraints
val constraintsBuilder = CalendarConstraints.Builder()
val startDate = Calendar.getInstance().apply {
set(2024, Calendar.JANUARY, 1)
}.timeInMillis
val endDate = Calendar.getInstance().apply {
set(2024, Calendar.DECEMBER, 31)
}.timeInMillis
constraintsBuilder.setStart(startDate)
constraintsBuilder.setEnd(endDate)
builder.setCalendarConstraints(constraintsBuilder.build())
}
Styling
Default styling
The component uses the calendarButtonStyle from the design system.
<com.backbase.android.design.calendar.CalendarButton
style="?calendarButtonStyle"
android:text="Select date" />
Custom styling
Create custom styles by extending the base style.
<style name="CustomCalendarButton" parent="Widget.Backbase.Calendar">
<item name="android:textColor">@color/custom_text_color</item>
<item name="android:background">@drawable/custom_background</item>
</style>
<com.backbase.android.design.calendar.CalendarButton
style="@style/CustomCalendarButton"
android:text="Custom styled button" />
States
Enabled/Disabled state
Control the interactive state of the calendar button.
val calendarButton = findViewById<CalendarButton>(R.id.calendar_button)
// Disable the button
calendarButton.isEnabled = false
// Enable the button
calendarButton.isEnabled = true
Selected state
The button automatically updates its text when a date is selected.
calendarButton.addOnDateChangeListener { selectedDate ->
// Button text automatically updates with formatted date
// Additional handling can be done here
validateSelectedDate(selectedDate)
}
Events
Date selection events are handled through listener methods.
calendarButton.addOnDateChangeListener { selectedDate ->
// Handle date selection
when {
selectedDate.isAfter(LocalDate.now()) -> {
// Future date selected
showMessage("Future date selected: $selectedDate")
}
selectedDate.isBefore(LocalDate.now()) -> {
// Past date selected
showMessage("Past date selected: $selectedDate")
}
else -> {
// Today selected
showMessage("Today selected")
}
}
}
Accessibility
Accessibility configuration
The component inherits MaterialTextView accessibility features.
<com.backbase.android.design.calendar.CalendarButton
android:contentDescription="Select appointment date"
android:hint="Tap to choose a date"
style="?calendarButtonStyle" />
Best practices
- Provide clear content descriptions that explain the button's purpose
- Use meaningful hint text to guide users
- Ensure the selected date format is announced clearly by screen readers
- Test with TalkBack to verify proper accessibility navigation
Design tokens
The component uses Backbase design tokens for consistent theming:
- Typography: Consistent text styles from the design system
- Colors: Background and text colors that adapt to the current theme
- Spacing: Standard padding and margins for proper touch targets
- Shape: Corner radius and border styling from design tokens