Material Design 3 UI Redesign

[liraz747]

Material Design 3 UI Redesign

Hey @eladnava!

As discussed in issue #68, I have been working on modernizing the app UI to follow Material Design 3 guidelines. This has been such a fun (but also quite challenging!) project to work on, and I am really excited to share what I have come up with!

This is a pretty massive refactor - the app has been completely transformed while keeping all the core functionality intact.

---

Whats New

Core UI Overhaul

• Material Design 3 theme while keeping the signature red color consistent
• Bottom Navigation replacing the old app bar buttons navigation
• Collapsing toolbar layout
• Modern card-based alerts list with rounded corners and elevation
• Swipe to refresh on the recent alerts list
• Smooth animations throughout the app (fade transitions, slide-ins, shared element transitions)
• Skeleton loading animation on first app launch for a polished loading experience
• Automatic theme is now the default (follows system dark/light mode setting)
• Predictive back gesture animations support (Android 14+)

New Fragment-Based Architecture

• Migrated from Activities to Fragments for better navigation and seamless transitions
• AlertsFragment - Recent alerts with pull-to-refresh and animation when new alerts arrive
• AlertsMapFragment - Full-screen alerts map
• MapFragment - Detail view that expands from the alert card with shared element transition (no longer a separate activity)
• Modern PreferenceFragmentCompat replacing deprecated PreferenceActivity

Settings Revamp

• All settings screens redesigned with Material 3 components
• SwitchPreferenceCompat with proper Material 3 styling and checkmark icons
• Material Symbols icons added to all preference items for better visual hierarchy
• Proper RTL support maintained throughout

Visual Improvements

• Material Symbols icons replacing older Material Design icons throughout the app
• Modern alert cards with threat type icons, city names, and relative timestamps
• Improved popup design for incoming alerts
• SwipeRefreshLayout with Material 3 colors
• Shimmer/skeleton loading animation
• Custom Material 3 switches with checkmark icons

Internationalization

• Added missing translations for new strings (map, alertLocation, alertAt) across all supported languages

Technical Improvements

• AndroidX Preference library replacing deprecated android.preference
• Material Components library (1.12.0)
• Proper lifecycle handling with static caching to prevent unnecessary reloads on tab switches
• Memory leak fixes for timers in fragments
• Removed deprecated ProgressDialog in favor of Material dialogs
• Battery optimization permission now requested via direct system prompt rather than requiring users to navigate to settings manually
• Predictive back gesture callback enabled

---

Screenshots

(The screenshots from issue #68 show the new design)

---

Testing Notes

While I tried to thoroughly test the app with a mock server I connected it to, I was not able to test with the original API due to Firebase Installations (FIS) auth errors, Pushy authentication errors, and other auth errors with the RedAlert API during development. The core alert logic remains completely unchanged, so everything should work as expected once connected to the production servers.

---

Notes

• All core alert functionality (push notifications, sound alerts, popups) remains completely unchanged
• The app builds successfully
• API endpoints and keys are preserved
• All existing user preferences will continue to work

---

Related Issue

Closes #68

---

Let me know if you have any questions or if theres anything youd like me to adjust! :)

Thanks for considering this contribution!

[liraz747]

Hey, just added a few last-minute UI polishes and fixes I wanted to get in-

• Collapsing Toolbar: Smoothed out the transitions and fixed the collapsed grey-colored state not always sticking when navigating between settings screens.
• Multi-Select Dialog: Gave the checkboxes and search bar a Material 3 redesign too and fixed a flicker bug with the checkbox animations.
• Volume Slider: The tooltip added with the Material 3 slider was a bit redundant, so I've hidden it.
• Alerts List: Added a nice fade-in for the 'No Alerts' message when the list is empty.
• RTL: Made the back arrow mirror correctly for RTL layouts.
• Cleanup: Removed some old transition code that wasn't needed anymore.

[eladnava]

Hi @liraz747,
First off, thank you so very much for all the time, effort, and hard work you put into this! 🙏 I think the new design is really nice and modern, and a very welcome change. 👏 Your hard work & efforts are greatly appreciated! 💯

I have a few minor bugs/design notes I would be glad to bring to your attention. Can you please address these?

1. Collapsing toolbar layout - in my opinion, the gap between the system UI navbar and the fragment title is too large (until the fragment is scrolled), anything we can do about this? Seems like a lot of empty space, would be glad if it could be reduced:

2. Once clearing the list of Recent Alerts (dismissing old alerts) using the button, it is impossible to bring them back (the restore button doesn't show up in the action bar).

3. In the initial app installation onboarding process the dialog message is displayed "Select your city/town to receive alerts" and the app takes you to the Settings fragment but the Cities multiselect dialog isn't automatically displayed, can you please rectify this?

4. The title displayed in the Map View when tapping a Recent Alert has been modified to display just the alert time instead of the type of alert (missile alert) and the names of cities, can you please restore the original text from the current master branch?

5. On that same page, tapping the Back button doesn't do anything (it should bring you back to Recent Alerts display). Furthermore, the Share button is gone - there is no option to share the Recent Alert anymore.

6. On the Map tab (Live Recent Alerts Map) there is no indication that the app is constantly being updated every 10 seconds to refresh the recent alerts, is there any loading indicator or spinner you can add there like in the current master branch?

7. There was an alert for "פטיש" yesterday and it is showing up in the Recent Alerts list view, but the Live Map view which should show all Recent Alerts from the past 24 hours isn't showing it until around 10 seconds pass (automatic map reload), can you please fix this?

8. After leaving the app and returning to it it seems 2 Clear Recent Alerts buttons were added:

9. One more note: Google Play now requires app updates to target targetSdkVersion 35, please update the targetSdkVersion in app/build.gradle accordingly and re-test the app after performing this change. There will most likely be some nav bar styling / background color issues after performing this change.

Other than that, I think the new design is really nice and modern, and a very welcome change! Hopefully we can squash these bugs and merge it once the above points have been addressed. 🙏

Thanks again so much for the hard work you put into this! 🥇

[liraz747]

Hey @eladnava!

I'm glad you like the design! :) I tried to address all the issues you mentioned:

UI Changes:

• Switched the collapsing toolbar layout for a standard TopAppBar/back to the action bar
• Improved title display when clicking an alert
• Fixed the map showing cropped
• Fixed the share button stuttering when switching to map tab for a moment

Bug Fixes:

• Fixed the map only loading on automatic map reload and taking 10 seconds to load
• Got share button back
• Fixed the restore button not showing on the alerts list after clearing all alerts
• Fixed the "Select your city" popup to redirect to the actual city selection dialog

Improvements:

• Added back a loading indicator on automatic map refreshes
• Added an animation for clearing and restoring the recent alerts list :)
• Implemented asynchronous loading for the map when going to the map tab (preventing delay when switching to it)
• Added predictive back animation when switching between settings screens
• Made the action bar title immediately change back to recent alerts when going back from an alert rather than waiting for animation to finish to make the app feel more responsive

Other:

• Updated to TargetSdkVersion 35

I couldn't seem to reproduce the 2 clear recent alerts buttons appearing or the back button not working when viewing an individual alert - could you please check if it's working as expected for you now? :)

[eladnava]

Hi @liraz747,
Thank you so very much for your patience, and all the time, effort, and hard work you put into these fixes! 🙏 Apologies for the delay in response, I have been swamped with work and have finally found some time to review your changes.

I really like the new TopAppBar design, thanks for making that change so that the whitespace issue is addressed. The animations are great, and I think the app looks so much more modern now.

I have a few more minor bugs that I would be glad to bring to your attention. Can you please address these?

1. Secondary Alerts: Tapping "Secondary cities" crashes the app with the following exception:

java.lang.IllegalStateException: ListPreference requires an entries array and an entryValues array which are both the same length
                                                                                                    	at com.red.alert.ui.elements.SearchableMultiSelectPreference.showSelectionDialog(SearchableMultiSelectPreference.java:116)

2. Advanced Settings: Tapping "Volume Level" similarly crashes the app with the following error, most likely because this new version now expects the volume SharedPreference value to be an Integer, whereas previous versions of the app used an Float:

java.lang.ClassCastException: java.lang.Float cannot be cast to java.lang.Integer
                                                                                                    	at android.app.SharedPreferencesImpl.getInt(SharedPreferencesImpl.java:329)
                                                                                                    	at androidx.preference.Preference.getPersistedInt(Preference.java:1813)

For backwards compatibility, please ensure that all existing users of the app will be able to seamlessly update to this new version of the app (the existing SharedPreferences and their storage types have to be taken into account).

Note: This also crashes in Secondary Alerts -> Volume Level.

I can see that on a fresh install, this bug is not reproducible.

3. After updating my existing app (master branch) to your PR branch, I was prompted to re-select cities even though I had some Secondary Cities selected (and Secondary Alerts enabled) in the previously installed version. The app should only ask the user to re-select cities in case they have no active selection (primary nor secondary).

4. Indeed, if you could please rebase and resolve any conflicts, and integrate any changes/features introduced in the meantime, that would be great.

5. Battery optimizations whitelist: After tapping "Allow" the app still displays the following warning:

Only after switching back to the Recent Alerts tab and back to Settings does the app hide it. Please check whether the app becomes exempt from battery optimizations in the onResume() of the Settings fragment and hide the warning automatically / immediately.

6. Show popup (Advanced Settings): Similarly, the toggle stays "off" even after the user has permitted the "Display over screens" permission:

The app should detect that the user just enabled the permission in device settings and auto-enable the Show Popup setting immediately (the master branch code already does this).

7. "Improve reliability" (Advanced Settings) - nothing happens when toggled on/off. It should call the relevant method to enable/disable the Pushy foreground service. It seems the setOnPreferenceChangeListener() is missing. Please check master branch for current implementation.

8. Location-based alerts - similarly, nothing appears to happen - there is no listener defined for the setting which starts the location service currently by calling ServiceManager.startLocationService(LocationAlerts.this);. Please copy code from current master branch.

Tapping "Update Interval" & "Max Distance" settings leads to a crash (Float cannot be cast to java.lang.Integer).

9. Please run end-to-end feature testing to ensure all app features are working as expected and the app no longer crashes.

10. Please install the current version of the app (master branch), modify each and every setting, and then update to your version of the app to check for any crashes or inconsistencies when trying to update every setting again.

Once all these can be resolved and the app is 100% functional, I will be glad to merge this PR and release an update. 🙏

Thanks again for your time and efforts!