feat(deck-picker): edge to edge support#20964
Open
david-allison wants to merge 3 commits into
Open
Conversation
david-allison
commented
May 7, 2026
ericli3690
requested changes
May 15, 2026
Member
ericli3690
left a comment
There was a problem hiding this comment.
Code-wise, looks fantastic! Only nits.
I tested on a Lenovo Tab M11 and it looks good. However, when I tested on my phone (Samsung S23, API 34), there were issues with overlapping icons in landscape mode on the left and right hand sides, did you forget to apply left and right insets? Note the overlapping "show tabs" and "back" icons on the left and right edges in the screenshots here:
This doesn't look intended.
3aa05a8 to
fa68296
Compare
ericli3690
approved these changes
May 18, 2026
Member
ericli3690
left a comment
There was a problem hiding this comment.
Looks good to me!
Tested on my phone: visual bug on horizontal screens is fixed. Thanks David!!
For activities with 'Theme_Dark.Launcher', android:windowBackground is set, but was never removed. On views with transparent backgrounds (such as the Card Browser column headers), this leaked through when edge to edge was enabled Part of issue 17334 - Edge to Edge Assisted-by: Claude Opus 4.7 - diagnostics + fix
fa68296 to
ce3effa
Compare
Prep for edge-to-edge work. Scrolling tests were attempted, but Roborazzi did not scroll the RecyclerView correctly Issue 17334 Assisted-by: Claude Opus 4.7 - much of the initial implementation
ce3effa to
b3f077b
Compare
In order to support edge to edge, we needed to move the RecyclerView underneath the nav + "Studied X in Y" TextView. The bottom nav on many Android phones will fade the content underneath it, but different phones have different implementations, using private colors. So we define our own 'BottomFadeFrameLayout' to handle this. Roughly equivalent to the fade on an API 33 emulator ---- The screenshot test did not place the FAB in the correct place vertically. Therefore adjustmnets were made behind an isRobolectric wrapper The last row of the RecyclerView is moved by a few pixels to be directly in-line with the top of the FAB The padding cannot be lower, otherwise the FAB would obscure the counts. If the nav bar is on the side, this transparent bar should not occur, otherwise the action bar 'blue' appears in the nav, and this looks unusual. I attempted to make tests in Roborazzi which scrolled to the bottom of the list, but they were flaky (1px of padding made a huge difference in scroll position) Issue 17334
b3f077b to
ebe8e44
Compare
Contributor
|
Snapshot diff report vs
All 2 changed screenshotsDeckPickerScreenshotTest
DeckPickerTabletScreenshotTest
|
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
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.
Note
Assisted-by: Claude Opus 4.7 - lots of discussion, wasn't too helpful here
Purpose / Description
This PR enables edge to edge support for the Deck Picker. The DeckPicker currently uses an opaque toolbar, so we only need to focus on edge-to-edge for the bottom bar & side panels (for example: if there's a camera cutout on a tablet).
Fixes
Approach
This was difficult and there was a lot of trial and error.
Deck List & "Studied X cards in Y seconds"
The deck list needs to be at the bottom of the screen.
- android:layout_above="@id/review_summary_text_view"Due to this, the deck list appears under the review summary. Before this change, the
review_summarybackground was effectively opaque, and now needs to handle overlap with the deck name, without obscuring the content.Furthermore, some Android versions have a 'transparent nav', which applied a transparency filter to elements underneath it. Different Android versions did this differently, and the colors were non-public(with API <= 25 not supporting dark navigation buttons), so I rolled my own (
BottomFadeFrameLayout): using aDST_OUTfilter.FAB
The floating action bar is surprisingly complex: it uses a
ScrollViewto handle smaller screens, and this means we need a margin for the shadow to display properly, rather than removing its clipping behavior.I extracted some of the bottom padding to try and remove 'fabBottomOffset', but due to the shadow requirements, this did not seem feasible.
isRobolectric: due to an undetermined bug, the FAB was ~24dp too low on the screenshot after edge to edge was implemented. This fixes it manuallyHow Has This Been Tested?
tools/compare-screenshot-test.sh 8f35410 "com.ichi2.anki.Deck**ScreenshotTest"
Details
Overlap with selected deck - same style as the standard Android bottom nav
Learning (optional, can help others)
https://developer.android.com/develop/ui/views/layout/edge-to-edge
Checklist