Skip to content

Move home screen tabs to a bottom navigation bar - #3688

Open
kkebb wants to merge 12 commits into
quran:mainfrom
kkebb:feature/bottom-nav-home
Open

Move home screen tabs to a bottom navigation bar#3688
kkebb wants to merge 12 commits into
quran:mainfrom
kkebb:feature/bottom-nav-home

Conversation

@kkebb

@kkebb kkebb commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown

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.

  • Moves the navigation (Surahs / Juz / Bookmarks) from the top swipeable tab strip to a Material BottomNavigationView at the bottom.
  • Moves the action toolbar (last page, search, overflow menu) from the top to the bottom, below the bottom navigation as the bottom-most element. The overflow popup opens upward. The Toolbar remains the support action bar, so all menu items behave exactly as before.
  • Applies the same BottomNavTheme (Material Components Bridge) to both the bottom navigation and the action toolbar so icon/title colors match.
  • Flattens the bottom chrome: disables Material elevation overlays and forces zero elevation on both bars so no shadow gradient appears between the nav and toolbar (a flat 1dp top divider separates scrolling content from the bottom chrome instead).
  • When search is expanded, hide the bottom nav and lift only the search toolbar above the keyboard.
  • Selection stays in sync both ways: tapping a bottom tab switches the pager, and swiping the pager updates the selected tab (a guard flag avoids feedback loops). RTL order is preserved via the existing abs(position - 2) mapping.
  • Edge-to-edge insets: the root reserves both the top (status bar) and bottom (navigation/gesture bar) insets.

PR stack & overlap

This PR is independent of the other two UX PRs. It does not share any files with #3687 or #3686.

PR Screen Scope
#3687 Reading (PagerActivity) Bottom toolbar + audio bar
This PR (#3688) Home (QuranActivity) Bottom nav tabs + bottom toolbar
#3686 Both Random ayah menu only

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.

Merged onto latest main (2026-09-09). The only conflict was BookmarksFragment.kt: kept main's bookmark sync/sign-in card, empty state, and pull-to-refresh, and continued omitting list bottom-inset padding so the bottom navigation owns that inset.

Changes

  • res/layout/quran_index.xml — pager weighted on top; bottom_chrome container 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).
  • New: menu/bottom_nav_menu.xml, drawable/ic_nav_{surahs,juz,bookmarks}.xml, color/bottom_nav_item_color.xml, BottomNavTheme in themes.xml.

Related

Test plan

  • Tap each tab (Surahs / Juz / Bookmarks); pager switches and the correct tab highlights.
  • Bottom action toolbar shows title + last page + search + overflow; overflow opens upward.
  • Nav and toolbar share a flat background with no gradient/shadow between them.
  • Gesture-nav: bottom chrome sits flush above the system navigation bar.
  • Expand search; confirm bottom nav hides and only the search toolbar sits above the keyboard.
  • Swipe the pager; the bottom nav selection follows.
  • RTL locale (e.g. Arabic): initial tab and tab↔page mapping are correct.
  • Bookmarks multi-select: contextual action mode still appears correctly.
  • Bookmarks tab: sync sign-in card, empty state, and pull-to-refresh from main still work with the bottom chrome.

Test results

./gradlew :app:testMadaniDebugUnitTest -PdisableFirebase
  • BUILD SUCCESSFUL (latest run: 2026-09-09, after merging latest main)
  • Full :app unit test suite passing (0 failures, 0 errors)

Note: the original BottomNavTheme referenced ThemeOverlay.MaterialComponents.DayNight, which does not exist in the Material Components library and caused resource linking to fail. It now uses Theme.MaterialComponents.DayNight.Bridge.

Made with Cursor

@kkebb @cursoragent
Move home screen tabs to a bottom navigation bar
12240cd 
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>
@kkebb kkebb mentioned this pull request Jun 16, 2026
Open
5 of 8 tasks
@kkebb @cursoragent
Fix BottomNavTheme parent to a valid Material theme
1cd5cd0 
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
Open
Open
kkebb and others added 8 commits June 16, 2026 13:07
@kkebb @cursoragent
Move home screen toolbar to the bottom
8a91f5a 
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>
@kkebb @cursoragent
Place home toolbar below the bottom navigation
7948316 
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>
@kkebb @cursoragent
Remove elevation from the bottom home toolbar
9b291e5 
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>
@kkebb @cursoragent
Apply BottomNavTheme to the home action toolbar
492866b 
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>
@kkebb @cursoragent
Flatten home toolbar by unifying bottom chrome elevation
f3c76b6 
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>
@kkebb @cursoragent
Fully flatten bottom chrome by disabling Material elevation
d7d4df2 
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>
@kkebb @cursoragent
Lift home bottom chrome above the keyboard when searching
c9873bc 
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>
@kkebb @cursoragent
Lift only the search toolbar above the keyboard on home
e76e550 
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>
@Usman-bhat

Usman-bhat commented Aug 13, 2026

Copy link
Copy Markdown

Hi @kkebb I checked the merge conflict on #3688 and resolved it against the latest main.

The conflict was only in BookmarksFragment.kt. I kept the new bookmark sync/sign-in card, empty state, and pull-to-refresh changes from main, while preserving this PR’s bottom navigation behavior by avoiding duplicate bottom inset padding on the bookmarks list.
I pushed the resolved merge here:
https://github.com/Usman-bhat/quran_android/tree/feature/bottom-nav-home

Validation passed with:
./gradlew :app:testMadaniDebugUnitTest
--tests com.quran.labs.androidquran.presenter.bookmark.BookmarkPresenterTest
--tests com.quran.labs.androidquran.presenter.bookmark.TagBookmarkPresenterTest
-PdisableFirebase

Commit: 2239d2c

@KhaledKhaled0909

KhaledKhaled0909 commented Aug 14, 2026

Copy link
Copy Markdown

Finaly the options is moving down💚💚

@Usman-bhat

Usman-bhat commented Aug 14, 2026

Copy link
Copy Markdown

Finaly the options is moving down💚💚

Thank you khalid, i am working on this amazing project make sure to look into it and contribute.
https://fiqhai-web.vercel.app/

@kkebb @cursoragent
Merge origin/main into feature/bottom-nav-home
072bfa4 
Keep the new bookmark sync/sign-in card, empty state, and pull-to-refresh
from main. Continue omitting list bottom inset padding so the bottom
navigation owns that inset.

Co-authored-by: Cursor <cursoragent@cursor.com>
@kkebb

kkebb commented Sep 10, 2026

Copy link
Copy Markdown
Author

Reconciled against latest main. The only conflict was in BookmarksFragment.kt: kept the bookmark sync/sign-in card, empty state, and pull-to-refresh from main, and continued omitting list bottom-inset padding so the bottom navigation owns that inset.

@kkebb

kkebb commented Sep 10, 2026

Copy link
Copy Markdown
Author

can we approve the other MRs as well and get them all merged? all related MRs are listed in the description

@cursoragent
Merge upstream/main into feature/bottom-nav-home
501a3a3 
Bring the home bottom navigation up to date with main.

Co-authored-by: Cursor <cursoragent@cursor.com>
@kkebb

kkebb commented Oct 11, 2026

Copy link
Copy Markdown
Author

@ahmedre Updated with latest main today (merged, conflict-free). These three are independent and can merge in any order:

Actions is waiting on workflow approval before CI can run. Could you approve the workflows and take a look when you have a chance?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@Usman-bhat Usman-bhat Usman-bhat approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@kkebb @Usman-bhat @KhaledKhaled0909 @cursoragent