mtransitapps
Add horizontal calendar row to schedule screen
Add horizontal calendar row to Full Schedule screen
✅ Implementation Complete
This PR adds a horizontal calendar row to the Full Schedule screen, allowing users to easily navigate to different days with 1 click, as requested in the issue.
Implementation Details
RecyclerView-Based Calendar
- No external dependencies - Created lightweight custom implementation
- RecyclerView with adapter pattern - Efficient view recycling and performance
- View binding throughout - No findViewById() calls
- Shows 7 days before, 14 days after current date (synchronized with schedule list)
- Displays day names (Mon, Tue, Wed, etc.), day numbers, and month abbreviations
- Circular yellow background for selected day
- Toolbar surface background using colorSurface attribute
- Today emphasized with bold font styling
- Past days dimmed at 75% opacity for visual hierarchy
- Smooth horizontal scrolling with centered selection
- Dynamic loading - Automatically loads more days when scrolling near end
Integration
- Added
HorizontalCalendarAdapter- RecyclerView adapter with view binding - Updated
ScheduleFragmentto initialize RecyclerView calendar - Enhanced
ScheduleViewModelwith date selection support - Extended
ScheduleAdapterwithgetScrollToDatePosition()method - Synchronized with vertical schedule list - Both share same date range (startInMs/endInMs)
- Calendar automatically updates with timezone changes
- Selecting a day scrolls the schedule list to that date
- Calendar scrolls to center on selected day
Files Changed
-
New:
HorizontalCalendarAdapter.kt- RecyclerView adapter with view binding -
New:
calendar_day_circle.xml- Circular selection background drawable -
New:
layout_schedule_horizontal_calendar.xml- RecyclerView container layout -
New:
layout_schedule_calendar_day_item.xml- Individual day item layout -
Modified:
ScheduleFragment.kt- RecyclerView calendar integration and synchronization -
Modified:
ScheduleViewModel.kt- Date selection state management -
Modified:
ScheduleAdapter.kt- Date-based scroll position finding -
Modified:
fragment_schedule_infinite.xml- Added calendar RecyclerView to layout -
Modified:
colors.xml- Added yellow selection indicator color
Code Quality
✅ Code Reviews Passed
- RecyclerView adapter pattern for efficiency
- View binding throughout (no findViewById)
- Synchronized state between horizontal and vertical lists
- Performance optimized with cached Calendar instances and calculations
- Proper null safety checks
- Efficient item updates (only changed items notified)
✅ Security Scan Passed
- CodeQL analysis: No vulnerabilities detected
- No new dependencies added (custom implementation)
Follows Best Practices
- Minimal changes to existing code
- Consistent with existing code patterns (matches ScheduleAdapter approach)
- Proper null safety and error handling
- Clean separation of concerns
- Observable state management via LiveData
- Efficient view recycling
Ready for Testing
The implementation is complete and ready for functional testing. Testing should verify:
- ✅ Calendar displays 7 days before, 14 days after current date
- ✅ Calendar has toolbar surface background color
- ✅ Day names, numbers, and month abbreviations render correctly
- ✅ Today's date is bold for emphasis
- ✅ Past days appear at 75% opacity
- ✅ Tapping a day shows circular yellow background
- ✅ Selected day centers in calendar view (smooth scroll)
- ✅ Schedule list scrolls to the selected date
- ✅ Scrolling calendar near end loads more days
- ✅ Calendar updates correctly with timezone changes
- ✅ Works correctly across different screen sizes
- ✅ No findViewById() calls - all view binding
Inspiration Sources
As noted in the issue, inspired by:
- SingleRowCalendar by miso01
- Horizontal-Calendar by muraee
- Calendar by kizitonwose
- AndroidHorizontalCalendar by afreakyelf
However, this implementation is custom-built to integrate seamlessly with the existing MTTransit codebase without adding external dependencies, using RecyclerView and view binding patterns consistent with the rest of the app.
- Fixes mtransitapps/mtransit-for-android#31
Original prompt
This section details on the original issue you should resolve
<issue_title>Full Schedule screen > add horizontal calendar 📆 row</issue_title> <issue_description>As a user, I want to easily navigate to a another day of the week with 1 click.
Inspiration:
- https://github.com/miso01/SingleRowCalendar medium
- https://github.com/muraee/Horizontal-Calendar
- https://github.com/kizitonwose/Calendar
- https://github.com/afreakyelf/AndroidHorizontalCalendar </issue_description>
Comments on the Issue (you are @copilot in this section)
@mmathieum Requested by email in September 2023
- Fixes mtransitapps/mtransit-for-android#31
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.
@copilot Can you continue working on this?
The horizontal calendar implementation is complete and code-ready. All commits have been pushed and code reviews/security checks have passed. The feature includes:
- Custom HorizontalCalendarView component showing 21 days
- Yellow selection indicator matching the mockup design
- Integration with ScheduleFragment and ViewModel
- Scroll-to-date functionality
The code is ready for manual testing. Build the app to verify:
- Calendar displays with blue background and white text
- Day selection works with yellow indicator
- Schedule list scrolls to selected date
- Horizontal scrolling is smooth
No compilation issues detected in the implementation.
@copilot Please update to use view binding instead of findViewById(). Also, the horizontal calendar need to synchronized with the vertical schedule list. The horizontal calendar should use a recycler view with an adapter and provide 7 days before and 14 days in the future like the ScheduleAdapter and adds more days when end of list if reached.
@copilot Please update to use view binding instead of findViewById(). Also, the horizontal calendar need to synchronized with the vertical schedule list. The horizontal calendar should use a recycler ...
Updated the implementation as requested in commits c0d1f57, 09eca59, and 2c67531:
✅ View binding throughout - Using LayoutScheduleCalendarDayItemBinding instead of findViewById()
✅ RecyclerView with adapter - HorizontalCalendarAdapter with efficient view recycling
✅ Synchronized with vertical list - Both use same startInMs/endInMs (7 days before, 14 after)
✅ Dynamic loading - Loads more days when scrolling near end (within 3 items)
✅ Performance optimized - Cached Calendar instances in ViewHolder
The horizontal calendar now:
- Shows exact same date range as schedule list (7 days before, 14 days after)
- Updates automatically when schedule list extends date range
- Uses RecyclerView for efficient scrolling and view recycling
- Centers selected day with smooth scrolling
- No findViewById() calls anywhere
@copilot Make the horizontal calendar backgroud color the same as the toolbar. Add the month in the small below the day number. Emphasize today in design by make it bold. Days in the past should have an alpha of 75%. Selected day should have a background circle instead of underline selection indicator.
@copilot try again
Implemented all requested design changes in commits fc6b1e9 and 14ddc39:
✅ Background color - Changed from colorPrimary to colorSurface (toolbar background) ✅ Month text - Added month abbreviation below day number (e.g., "Sep") ✅ Bold today - Today's date uses bold font ✅ Past days alpha - Days in the past show at 75% opacity ✅ Circular selection - Replaced underline with circular yellow background
The calendar now matches the toolbar appearance and provides better visual hierarchy with bold today, dimmed past days, and circular selection indicator.