Move home screen tabs to a bottom navigation bar#3688
Open
kkebb wants to merge 10 commits into
Open
Conversation
Replace the top swipeable SlidingTabLayout on the home screen with a Material BottomNavigationView (Surahs / Juz / Bookmarks) at the bottom, within easier thumb reach. - Keep the existing ViewPager and its 3 fragments; sync selection in both directions (tap to switch and swipe), with RTL-aware index mapping. - Add a contained Material ThemeOverlay applied only on the bottom nav, so the rest of the AppCompat-themed app is untouched. - Add nav icons, menu, and a selected/unselected color selector. - Move the bottom navigation-bar inset to the bottom nav; the list fragments no longer add their own bottom inset padding. Co-authored-by: Cursor <cursoragent@cursor.com>
8 tasks
ThemeOverlay.MaterialComponents.DayNight does not exist in the Material Components library, causing resource linking to fail. Use the Theme.MaterialComponents.DayNight.Bridge theme, which supplies the Material attributes BottomNavigationView needs on top of the app's AppCompat theme. Co-authored-by: Cursor <cursoragent@cursor.com>
This was referenced Jun 16, 2026
Relocate the home screen action toolbar (last page, search, overflow menu) below the surah/juz pager so it sits directly above the bottom navigation bar, keeping all primary controls within thumb reach. Reserve the bottom window inset so the toolbar and bottom navigation clear the navigation/ gesture bar in edge-to-edge mode. Co-authored-by: Cursor <cursoragent@cursor.com>
Order the home screen action toolbar as the bottom-most element, beneath the Surahs/Juz/Bookmarks navigation bar. Co-authored-by: Cursor <cursoragent@cursor.com>
The bottom-most action toolbar no longer uses ToolBarArea elevation, so its shadow is not cast downward into the gesture bar. Elevation stays on the bottom navigation bar above it, separating the scrolling content from the bottom chrome. Co-authored-by: Cursor <cursoragent@cursor.com>
Use the same Material Components theme on the bottom action toolbar as the bottom navigation bar so icon and title colors match. Extend BottomNavTheme with shared control and text color attributes for toolbar rendering. Co-authored-by: Cursor <cursoragent@cursor.com>
Wrap the bottom navigation and action toolbar in a single elevated container so the shadow separates scrolling content from the bottom chrome instead of casting between the two bars. Give the toolbar an explicit flat background and zero elevation so it matches the navigation bar surface. Co-authored-by: Cursor <cursoragent@cursor.com>
Material BottomNavigationView still applied a default elevation shadow onto the action toolbar even with android:elevation="0dp" in XML. Remove wrapper elevation, disable elevation overlays in BottomNavTheme, force zero elevation and translationZ in code, and replace the content separator with a flat top divider drawable. Co-authored-by: Cursor <cursoragent@cursor.com>
Include IME insets in the home screen root window inset listener so the bottom navigation and action toolbar move above the soft keyboard when the SearchView is expanded. Co-authored-by: Cursor <cursoragent@cursor.com>
Hide the bottom navigation while SearchView is expanded and apply IME insets to the action toolbar only, instead of lifting the entire bottom chrome stack above the keyboard. Co-authored-by: Cursor <cursoragent@cursor.com>
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
1 participant
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
Reworks the home/index screen (
QuranActivity) chrome so the primary navigation and the action toolbar both live at the bottom of the screen, within easy thumb reach.BottomNavigationViewat the bottom.Toolbarremains the support action bar, so all menu items behave exactly as before.BottomNavTheme(Material Components Bridge) to both the bottom navigation and the action toolbar so icon/title colors match.abs(position - 2)mapping.PR stack & overlap
This PR is one of three related UX improvements. It does not share any files with #3687 — they touch different screens:
PagerActivity)QuranActivity)Both bottom PRs use similar patterns (bottom chrome, inset handling, search keyboard behavior) but on different activities and layout files. They can merge in either order.
Changes
res/layout/quran_index.xml— pager weighted on top;bottom_chromecontainer at bottom with nav then toolbar; flat backgrounds and zero elevation.res/drawable/bottom_chrome_background.xml— flat toolbar color with 1dp top divider for content separation.ui/QuranActivity.kt— bottom-nav ↔ pager wiring; root bottom inset + toolbar IME handling; hide nav on search expand; programmatic zero elevation on bottom chrome views.ui/fragment/{SuraList,JuzList,Bookmarks}Fragment.kt— removed per-list bottom inset padding (now owned by bottom chrome).menu/bottom_nav_menu.xml,drawable/ic_nav_{surahs,juz,bookmarks}.xml,color/bottom_nav_item_color.xml,BottomNavThemeinthemes.xml.Related
Test plan
Test results
:appunit test suite passing (0 failures, 0 errors)Also verified on an Android emulator (API 36, Pixel 6): bottom nav and action toolbar render stacked at the bottom (nav above, toolbar below), tab switching works, overflow opens upward, search keyboard behavior confirmed, and the flat background fix removes the elevation shadow gradient between the two bars.
Note: the original
BottomNavThemereferencedThemeOverlay.MaterialComponents.DayNight, which does not exist in the Material Components library and caused resource linking to fail. It now usesTheme.MaterialComponents.DayNight.Bridge.Made with Cursor