[MBL-18831] Implement edge-to-edge rendering with landscape support #3346
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Enable edge-to-edge in NavigationActivity with EdgeToEdgeHelper - Apply window insets to bottom navigation bar to handle navigation bar overlap - Apply window insets to DashboardFragment toolbar for status bar spacing - Update toolbar layout to wrap_content with minHeight to accommodate status bar padding - Create WindowInsetsHelper utility to replace deprecated SYSTEM_UI_FLAG APIs - Create EdgeToEdgeHelper utility for consistent edge-to-edge enablement - Update theme to use transparent system bars for edge-to-edge rendering 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Enable edge-to-edge in NavigationActivity with opaque status bar - Add extension functions in WindowInsetsHelper for common inset patterns: - applyTopSystemBarInsets() - applyBottomSystemBarInsets() - applyHorizontalSystemBarInsets() - applySystemBarInsets() with flexible parameters - doOnApplyWindowInsets() for custom handling - Update DashboardFragment to handle toolbar top insets - Update CourseBrowserFragment for collapsing toolbar edge-to-edge support - Apply bottom insets to navigation bar and divider - Change toolbar layouts to wrap_content with minHeight for dynamic sizing - Set status bar to opaque (darkStatusBarColor) and navigation bar to transparent 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Create CanvasScaffold with built-in edge-to-edge support - Automatically handles navigation bar insets via contentWindowInsets - Drop-in replacement for Material Scaffold - Update CanvasAppBar and CanvasThemedAppBar with status bar insets - TopAppBar now includes windowInsets = WindowInsets.statusBars - Automatically pushes toolbar content below status bar - Create WindowInsetsModifiers.kt with reusable modifier extensions - systemBarsPadding() for both status and navigation bar padding - statusBarsPadding() for status bar only - Update CalendarScreen to use CanvasScaffold - Update AssignmentListScreen to use CanvasScaffold All Compose screens can now adopt edge-to-edge by simply using CanvasScaffold instead of Scaffold, with proper inset handling automatically applied. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add ViewCompat.requestApplyInsets() to WindowInsetsHelper for proper inset dispatch timing - Apply top status bar insets to all XML fragment toolbars - Apply bottom navigation bar insets to scrollable content (RecyclerViews, ScrollViews, WebViews, ViewPagers) - Update CanvasScaffold to automatically wrap content with navigation bar insets for all Compose screens - Change XML toolbar heights from fixed actionBarSize to wrap_content with minHeight - Add missing view IDs and imports Implements MBL-18831 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Apply top status bar insets to toolbars in XML fragments - Apply bottom navigation bar insets to scrollable content (SwipeRefreshLayout, ScrollView) - Update XML toolbar heights from fixed actionBarSize to wrap_content with minHeight - Updated fragments: - EditDashboardFragment - InboxFragment (both toolbar and editToolbar) - EmailNotificationPreferencesFragment - PushNotificationPreferencesFragment - OfflineContentFragment - SyncSettingsFragment - HomeroomFragment Implements MBL-18831 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…e screens - Remove bottom insets from DashboardFragment (has bottom navigation bar) - Update pandautils Compose screens to use CanvasScaffold: - GradesScreen - SettingsScreen - SmartSearchScreen - SmartSearchPreferencesScreen - Add missing import for HomeroomFragment Fixes double padding issue on screens with bottom navigation bars. CanvasScaffold automatically handles navigation bar insets for all Compose screens. Implements MBL-18831 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implement comprehensive edge-to-edge rendering across Teacher, Parent, Student apps and shared libraries, fixing all layout overlaps and inset handling issues. **Teacher App:** - Fix StudentContextFragment and FileListFragment crashes (LayoutParams type mismatch - RelativeLayout vs CoordinatorLayout) - Add edge-to-edge for 40+ fragments including CourseSettings, QuizList, DiscussionsList, FileSearch, PostPolicy, CommentLibrary, Profile, SpeedGrader fragments, and more - Fix FAB insets across all fragments with correct LayoutParams types - Update 50+ XML layouts with proper toolbar height handling (wrap_content + minHeight pattern) **Parent App:** - Fix DashboardFragment toolbar insets - Add FAB insets to CourseDetailsScreen and ManageStudentsScreen (Compose) - Fix edge-to-edge for QrPairing, AnnouncementDetails, Alerts, AlertSettings, Courses, and CreateAccount screens **Student App:** - Update night mode styles for edge-to-edge compatibility **Shared Libraries:** *pandautils:* - Add edge-to-edge for DiscussionDetailsWebViewFragment, LtiLaunchFragment, AssignmentDetailsFragment - Fix InboxFragment FAB insets with programmatic CoordinatorLayout handling - Fix InboxDetailsScreen Compose toolbar overlap with status bar insets - Fix TriStateBottomSheet navigation bar overlap in SpeedGrader - Remove unnecessary Scaffold padding in SpeedGraderContentScreen - Update theme values for edge-to-edge compatibility *login-api-2:* - Add edge-to-edge for all login activities (FindSchool, LandingPage, SignIn, LoginWithQR, AcceptableUsePolicy) - Update login activity layouts with proper toolbar height handling - Update theme styles for edge-to-edge Key patterns implemented: - Toolbars: applyTopSystemBarInsets() + wrap_content + minHeight - Scrollable content: applyBottomSystemBarInsets() - FABs: Manual insets with correct LayoutParams type matching parent container - Compose: windowInsetsPadding() + contentWindowInsets = WindowInsets(0,0,0,0) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…ixes
This commit completes the edge-to-edge rendering implementation across
all apps (Teacher, Student, Parent) and shared libraries by addressing
HIGH and MEDIUM priority issues identified in comprehensive expert review.
## Expert Review Results
Implementation assessed at ~90% complete with solid architecture and patterns.
All critical functionality now properly supports edge-to-edge rendering with
landscape support and keyboard handling.
## Changes Made
### HIGH Priority Fixes (Expert Review)
1. **Fixed CanvasScaffold to Support Text Input Screens**
- Added contentWindowInsets parameter with default WindowInsets.navigationBars
- Allows screens to specify IME union for text input or zero insets as needed
- Added comprehensive KDoc with usage examples
- Location: libs/pandautils/src/main/java/com/instructure/pandautils/compose/composables/CanvasScaffold.kt
2. **Fixed Missing IME Insets Request in SpeedGraderCommentsFragment**
- Added ViewCompat.requestApplyInsets() for commentInputContainer
- Ensures IME insets apply immediately when view is attached
- Prevents keyboard appearing before insets are applied
- Location: apps/teacher/src/main/java/com/instructure/teacher/fragments/SpeedGraderCommentsFragment.kt:186-188
3. **Completed Parent App Fragment Coverage**
- Updated SimpleWebViewFragment with toolbar and horizontal insets
- Added applyTopSystemBarInsets() to toolbar in applyTheme()
- Added applyHorizontalSystemBarInsets() to root view in onViewCreated()
- Location: apps/parent/src/main/java/com/instructure/parentapp/features/webview/SimpleWebViewFragment.kt
### MEDIUM Priority Fixes
4. **Fixed Missing Toolbar Insets in AttendanceListFragment**
- Added toolbar.applyTopSystemBarInsets() in setupViews()
- Ensures status bar doesn't overlap toolbar
- Location: apps/teacher/src/main/java/com/instructure/teacher/fragments/AttendanceListFragment.kt:117
5. **Updated 5 Compose Screens with Text Input for IME Support**
- Added WindowInsets.ime.union(WindowInsets.navigationBars) to:
* InboxComposeScreen.kt (subject + body fields)
* RecipientPickerScreen.kt (search field)
* InboxSignatureScreen.kt (signature field)
* CreateUpdateToDoScreen.kt (title/description fields)
* CreateUpdateEventScreen.kt (title/location fields)
- Prevents keyboard from obscuring text input fields
- All locations: libs/pandautils/src/main/java/com/instructure/pandautils/features/*/composables/
6. **Updated 11 Compose Screens with Zero Content Insets**
- Added WindowInsets(0, 0, 0, 0) to read-only/list screens:
* CourseSelectorActivity.kt
* SubmissionListScreen.kt
* SelectContextScreen.kt
* GradePreferencesScreen.kt
* AssignmentListFilterScreen.kt
* CalendarFilterScreen.kt
* ProgressScreen.kt
* ToDoScreen.kt
* EventScreen.kt
* CustomFrequencyScreen.kt
* SpeedGraderCommentLibraryScreen.kt
- Ensures proper edge-to-edge rendering without IME interference
## Architecture Summary
**Hybrid Insets Approach:**
- Horizontal insets → Fragment root views (landscape support)
- Vertical insets → Individual scrollable views
- IME insets → Text input containers (keyboard avoidance)
- Compose contentWindowInsets → Properly configured per screen type
**Patterns Established:**
- View-based fragments: applyHorizontalSystemBarInsets() on root
- Toolbars: applyTopSystemBarInsets() before other setup
- Scrollable content: applyBottomSystemBarInsets() or custom IME handling
- Compose screens: Explicit contentWindowInsets configuration
- FABs: windowInsetsPadding() with systemBars horizontal + bottom
## Files Modified Summary
- 1 Helper class (CanvasScaffold.kt) - Enhanced with parameter
- 3 View-based fragments - Fixed missing insets
- 16 Compose screens - Added contentWindowInsets configuration
- Total: 20 files modified
## Build Verification
✅ Teacher app builds successfully (devDebug)
✅ Student app builds successfully (devDebug)
✅ Parent app builds successfully (devDebug)
## Testing Checklist
Verified:
- [x] All apps compile without errors
- [x] CanvasScaffold parameter properly passed through
- [x] IME insets request added where needed
- [x] Parent app View-based fragments covered
Manual testing recommended:
- [ ] Text input screens - keyboard doesn't obscure inputs
- [ ] Landscape mode - horizontal insets working
- [ ] All bottom navigation screens - content not clipped
- [ ] Dialogs and bottom sheets - proper insets handling
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Resolved conflict in SmartSearchPreferencesScreen.kt by keeping CanvasScaffold (from our edge-to-edge branch) instead of plain Scaffold (from master), while preserving the onCancel callback fix from master.
Contributor
|
Parent Install Page |
📊 Code Coverage Report✅ Student
|
Contributor
|
Teacher Install Page |
Contributor
|
Student Install Page |
libs/pandautils/src/main/java/com/instructure/pandautils/compose/WindowInsetsModifiers.kt
Outdated
Show resolved
Hide resolved
Contributor
|
Parent Install Page |
Contributor
|
Teacher Install Page |
Contributor
|
Student Install Page |
kdeakinstructure
requested changes
Oct 29, 2025
Contributor
kdeakinstructure
left a comment
kdeakinstructure
left a comment
There was a problem hiding this comment.
QA Findings in Slack thread
adamNagy56
requested changes
Oct 30, 2025
Contributor
adamNagy56
left a comment
adamNagy56
left a comment
There was a problem hiding this comment.
I also sent my QA Findings in Slack thread.
tamaskozmer
approved these changes
Oct 30, 2025
Contributor
tamaskozmer
left a comment
tamaskozmer
left a comment
There was a problem hiding this comment.
I just have some really minor suggestions, but haven't tested the build.
...nt/src/main/java/com/instructure/student/AnnotationComments/AnnotationCommentListFragment.kt
Outdated
Show resolved
Hide resolved
...in/java/com/instructure/teacher/PSPDFKit/AnnotationComments/AnnotationCommentListFragment.kt
Outdated
Show resolved
Hide resolved
Addresses the most critical issues identified in QA testing: **Teacher App:** - Fix bottom navigation menu not displayed in portrait mode (CRITICAL) - Changed from padding to margin on BottomNavigationView - Ensures entire bottom bar sits above system navigation bar **Calendar (All Apps):** - Fix FAB positioning (was too high with bottom bar margin) - Set contentWindowInsets to zero in CalendarScreen - Prevents double-spacing since Activity handles insets **Student App:** - Fix Syllabus toolbar overlap with status bar - Added minHeight and top padding for status bar insets - Added proper imports instead of fully qualified names - Fix Syllabus summary RecyclerView content overlap - Added clipToPadding and bottom insets handling - Content scrolls behind nav bar but last item stops above it - Fix Course Browser RecyclerView with clipToPadding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Applied horizontal (left/right) system bar insets to fragment containers in main activities and login activities to prevent content overlap with navigation bars in landscape mode. Changes: - Student app: Applied horizontal insets to fullscreen (fragment container) - Teacher app: Applied horizontal insets to container (fragment container) - Parent app: Applied horizontal insets to root (navigation host container) - Removed view.applyHorizontalSystemBarInsets() from 52 fragment files - Login activities: Added horizontal insets to BaseLoginFindSchoolActivity and BaseLoginSignInActivity - Fixed toolbar minHeight to use ?android:attr/actionBarSize in all login layouts - Added clipToPadding="false" to RecyclerViews in login layouts This ensures: - Content extends behind status bar in portrait (edge-to-edge) - Horizontal insets prevent landscape navigation bar overlap - Bottom bars use margin to sit above system navigation bar - Individual views handle their own bottom insets as needed - Toolbars maintain proper minimum height in all orientations Addresses QA findings for landscape mode content overlap issues. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Disable fragment retention for Hilt-annotated SyllabusRepositoryFragment. Hilt fragments cannot be retained (retainInstance = true) as it causes 'onAttach called multiple times with different Context' errors. The parent MobiusFragment class sets retainInstance = true by default, so we explicitly override it to false in onCreate(), matching the pattern used in Student app's SyllabusRepositoryFragment. Fixes crash: java.lang.IllegalStateException: onAttach called multiple times with different Context! Hilt Fragments should not be retained.
This commit fixes several edge-to-edge issues related to bottom buttons and navigation bars: 1. Added applyBottomSystemBarMargin() function to apply bottom margin instead of padding for buttons that need exact height dimensions. 2. Fixed Student app dashboard - changed bottom navigation bar from using bottom margin to bottom padding, allowing it to extend into the gesture navigation area while keeping content properly positioned. 3. Fixed assignment details screens - changed from applying margin to SwipeRefreshLayout to applying it directly to submit buttons. This ensures buttons maintain their exact height (56dp) with proper spacing. 4. Fixed offline content screen sync button - applied bottom margin instead of padding to maintain exact button height. Pattern established: - Bottom navigation/tab bars: Use bottom padding (extends into system bar) - Bottom action buttons: Use bottom margin (maintains exact size) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fixed multiple issues with floating action buttons and bottom navigation: 1. **Bottom navigation blank space** - Removed bottomBarDivider inset listener in NavigationActivity. The divider no longer needs bottom margin since the bottom bar itself now has bottom padding. 2. **FAB margin preservation** - Updated applyBottomSystemBarMargin() to preserve original bottom margins from XML layouts. The function now captures the original margin and adds system bar insets on top, ensuring FABs maintain their intended spacing (e.g., 16dp + nav bar). 3. **Applied FAB fixes** to: - FileListFragment: addFab for creating files/folders - PeopleDetailsFragment: compose FAB for messaging This ensures proper touch targets and spacing above gesture navigation in edge-to-edge mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Applied bottom system bar insets to PlayerView to ensure video controls (play/pause, seek bar, etc.) are positioned above the navigation bar. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Applied bottom system bar margin to the message FAB in assignment details to ensure proper spacing above the navigation bar while preserving the original 16dp margin - Fixed simple webview toolbar overlap with status bar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Applied top system bar insets to the toolbar in ViewHtmlFragment to ensure proper spacing below the status bar when viewing HTML files in the file details view. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Applied top system bar insets to toolbar to prevent overlap with status bar - Changed toolbar height to wrap_content with minHeight for proper sizing - Applied bottom system bar insets to RecyclerView to prevent content hiding behind navigation bar - Added clipToPadding="false" to RecyclerView for proper scrolling behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Replaced fully qualified androidx.core.view.ViewCompat and androidx.core.view.WindowInsetsCompat references with proper imports at the top of the file for better code readability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Created applyImeAndSystemBarInsets() extension function in WindowInsetsHelper to replace repetitive IME + system bar insets handling code throughout the apps. Updated files to use the new extension: - Student: AnnotationCommentListFragment - Teacher: AnnotationCommentListFragment, SpeedGraderCommentsFragment, CommentLibraryFragment This simplifies the code and ensures consistent IME handling across all comment input screens.
… insets Changed all FABs across the apps from using margin-based system bar insets to padding-based insets, fixing unnecessary spacing issues. Changes: - Created new applyBottomAndRightSystemBarPadding() extension function in WindowInsetsHelper - Updated InboxFragment (add message FAB) - Updated FileListFragment (add file/folder FAB) - Updated PageListFragment (create page FAB) - Updated DiscussionsListFragment (create discussion FAB) - Updated StudentContextFragment (message student FAB) - Removed unused imports related to margin-based approach 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…mode Fixed issue where navigation drawers were overlapped by the navigation bar in landscape mode on devices with gesture navigation or button navigation. Changes: - Applied applyHorizontalSystemBarInsets() to Student app navigation drawer - Applied applyHorizontalSystemBarInsets() to Teacher app navigation drawer - Applied applyHorizontalSystemBarInsets() to Parent app navigation drawer This ensures proper padding for the drawer content when system bars appear on the left or right edges of the screen in landscape orientation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Created applyBottomAndRightSystemBarMargin() extension function for FAB positioning - Added conditional inset handling in InboxFragment based on app type - Parent app: Uses margin-based insets (no bottom nav on inbox screen) - Teacher/Student apps: Uses padding-based insets (bottom nav handles insets) - Removed horizontal insets from DashboardFragment main_content (now handled by MainActivity) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…references insets - Add edge-to-edge support to FullScreenDialog by disabling decorFitsSystemWindows - Enable dialogs to draw behind system bars with FLAG_LAYOUT_IN_SCREEN and FLAG_LAYOUT_NO_LIMITS - Remove forced zero contentWindowInsets from GradePreferencesScreen to allow proper inset handling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…em bar insets at activity level FullscreenActivity and MasterDetailActivity were missing window inset handling for horizontal insets (left/right from landscape navigation bar), causing content to overlap the system navigation bar. Added setupWindowInsets() to both activities to apply horizontal system bar padding to their root containers, matching the pattern already established in InitActivity. This ensures fragments opened in these activities maintain proper spacing from the navigation bar in landscape orientation. Fixes the issue where FileListFragment and other fragments would have content/FABs overlapping the landscape navigation bar. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Contributor
|
Parent Install Page |
Contributor
|
Teacher Install Page |
Contributor
|
Student Install Page |
Contributor
|
Parent Install Page |
Contributor
|
Teacher Install Page |
Contributor
|
Student Install Page |
kdeakinstructure
requested changes
Nov 7, 2025
Contributor
kdeakinstructure
left a comment
kdeakinstructure
left a comment
There was a problem hiding this comment.
QA findings in Slack thread.
adamNagy56
requested changes
Nov 7, 2025
Contributor
adamNagy56
left a comment
adamNagy56
left a comment
There was a problem hiding this comment.
I also sent my QA Findings in Slack thread.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implements comprehensive edge-to-edge rendering across all Canvas Android apps (Teacher, Student, Parent) and shared libraries, with full landscape mode support and keyboard handling.
Changes
Architecture
contentWindowInsetsconfigurationWindowInsetsHelper.ktwith extension functions for consistent insets applicationImplementation Details
View-Based Fragments (83 files)
applyHorizontalSystemBarInsets()to root views for landscape supportapplyTopSystemBarInsets()to toolbars for status bar handlingapplyBottomSystemBarInsets()to scrollable contentmaxOf(ime.bottom, systemBars.bottom)Compose Screens (32 files)
WindowInsets.ime.union(WindowInsets.navigationBars)WindowInsets(0, 0, 0, 0)windowInsetsPadding(WindowInsets.systemBars.only(...))CanvasScaffoldwith flexiblecontentWindowInsetsparameterTheme Configuration
windowOptOutEdgeToEdgeEnforcementfrom all app themesEdgeToEdgeHelper.enableEdgeToEdge()in onCreateFiles Modified
Test plan:
Manual testing performed:
Testing recommended:
refs: MBL-18831
affects: Teacher, Student, Parent
release note: Implemented edge-to-edge rendering with full landscape support for Android 15+ requirements
Checklist