Modern home UI

[Hectoronian]

✨ Modern Home UI Refresh (Material 3)

📌 Summary

This Pulling Request is an initiative for a modernized Home UI and built with Material 3 principles, improving visual clarity, navigation flow, and extensibility while preserving existing functionality.

The update focuses strictly on UI/UX improvements — no game logic or engine behavior is modified.

---

🎯 Goals

• Modernize the Home screen look & feel
• Improve navigation clarity between Play / Practice / Academy / Settings
• Establish a scalable UI foundation for future features
• Keep changes isolated, safe, and easy to review

---

🆕 What’s New

🧭 Navigation

• Added a Bottom Navigation Bar for primary app sections
• App now launches directly into the Play section
• Smooth fragment transitions using native fade animations

🏠 Home / Play Screen

• Grid-based layout for play modes (responsive and touch-friendly)
• Added a Share button to invite others to play
• Visual consistency across Play and Practice sections

🧠 Practice Screen

• Reuses the same modern grid layout as Play
• Clearly indicates available vs future (“Coming Soon”) features
• Future modes can be enabled by simply toggling flags

🧱 Architecture Improvements

• Fragment instance caching to prevent unnecessary recreation
• Clear separation of concerns:
  • StartBaseActivity → UI shell & navigation
  • Fragments → mode selection only
• Layout reuse to reduce duplication and maintenance cost

---

🛠️ Technical Details

• Language: Java
• UI: Material 3–style components
• Navigation: BottomNavigationView + Fragments
• Animations: Native Android fade transitions
• Backward Compatibility: Preserved

---

✅ What This PR Does Not Do

• ❌ No game logic changes
• ❌ No engine or AI changes
• ❌ No networking changes
• ❌ No breaking API changes

---

🧪 Testing

• App launches correctly into Play screen
• Navigation between sections works as expected
• Existing features remain functional
• No crashes observed during normal navigation

---

🔮 Follow-Up Ideas (Out of Scope)

• Splash screen & branding
• Disabled mode overlays (“Coming Soon”)
• Enum-based routing for modes
• Accessibility improvements (contrast, content descriptions)

---

🙌 Notes for Reviewers

This PR is intentionally scoped to UI/UX improvements only.
Feedback on structure, naming, and extensibility is very welcome.

Thanks for reviewing! ♟️✨

[Hectoronian]

Team, keep in mind that this is not the end for UI, the idea is make it more fluid (windows style) or material style

[jcarolus]

@Hectoronian
I like the setup for the more modern approach!
I have been trying with something similar and decided to keep the old structure because I was not happy with the icons I could find/create for the different options and make it look good and consistent. That is going to be the challenge here as well.
A thing to keep in mind is some efforts have been made to make the app accessible for blind people, so testing the UI with Talkback will be needed.
Another thing is that there are two build variants, one for FOSS and one for the Google Play store. So the Google Play store one has a chromecast button (which uses stuff that is not allowed in FOSS context) - that button can still be in the Action bar of the start screen.

I would propose to create and review a set of icons that can be used for the UI (and perhaps a new logo as well) and see if we can get a nice consistent look and feel (i understand that for the purpose of the proof of concept you took some random icons, so that is perfectly clear).

[Hectoronian]

Completely agree! yes, I always use placeholders, construct the logic, then start working on the graphical part at the near end, then optimization, this is to prevent unnecessary rework, and UI-driven design decisions that could conflict with the main functionality later on.

[Hectoronian]

Icons were the same from the Android internal vectors and the app, if not, I make them on Illustrator

[jcarolus]

ok - most of the icons are based on bootstrap icons, kept in artwork/svg/icons which can be imported to an Android vector format, so there is a good consistency.
Are you aiming at creating new icons yourself, or picking the right ones from bootstrap icons, or... ?

[Hectoronian]

Yes I can use the Bootstrap ones, there might be a need for custom ones in the Academy section, but thats just future features. most icons needed are in Bootstrap (settings cog, etc)

I need to fix the FOSS xml since didn't knew it was used for FOSS, but I'll revert FOSS back to how it was structuraly and send an amend to the pull

[jcarolus]

Great - the play store build indeed broke - so then that is consistent again.
Let me know when some fresh icons are used for the different options, I am curious how that will turn out :)

[jcarolus]

@Hectoronian i am going ahead and create a branch to which i will cherry pick the work that can make it to the next version. This way we can continue development in small increments.

[Hectoronian]

Yes! That sounds great and i can focus on that branch.

[jcarolus]

@Hectoronian
Let's start with this, leaving the bottom navigation for a future improvement when main categories become more structured
#209

(the share menu item has ony been added on the PlayStore start.java)