Android: App redesign with multi-theme system

[t895]

Top-level look at changes

• New color mappings
• New theme switcher with 5 base themes based on the original colors, a material you variant of the original, Material You, Green, and Pink. The Green and Pink themes being examples for future themes
• Several unused icons have been removed along with style declarations in favor of global style settings wherever possible.

Dark Theme Breakdown

Click to expand

AlertDialog

• Old
• New

Home Screen

• Old
• New

Progress Bar

• Old
• New

Settings Menu

• Old
• New

Note - The action bar now collapses on every settings page when scrolling

Radio Buttons

• Old
• New

Sliders

• Old
• New

Buttons

• Old
• New

Emulation Menu

• Old
• New

Game Properties

• Old
• New

Game Details

• Old
• New

Edit Cheats

• Old
• New

Cheats downloading dialog

• Old
• New

Input Binding dialog

• Old
• New

Light Theme Breakdown

Click to expand

AlertDialog

• Old
• New

Home Screen

• Old
• New

Progress Bar

• Old
• New

Settings Menu

• Old
• New

Radio Buttons

• Old
• New

Sliders

• Old
• New

Buttons

• Old
• New

Emulation Menu

• Old Same as dark theme
• New

Game Properties

• Old
• New

Game Details

• Old
• New

Edit Cheats

• Old
• New

Cheats downloading dialog

• Old
• New

Input Binding dialog

• Old
• New

Runtime theme change demo

Note - This highlights how the default theme will stick to the strong background brand colors and how the new Material You pastel colors are shown.

Home navigation animation demo

Material Default Theme (Conversion of Dolphin colors to Material You ones)

• Light
• Dark

Material You Theme (With purple wallpaper)

• Light
• Dark

Green Theme

• Light
• Dark

Pink Theme

• Light
• Dark

[t895]

@MayImilae and @JosJuice Let me know if there's anything I could improve here

[Simonx22]

This looks great overall! I will take a closer look later, but I noticed that you changed the button text color:

IMO the text color shouldn't be dark here. This makes it less readable.

[t895]

I like the suggestion. I'll look into it, but this is done in part to account for a wider variety of theme colors.

Here's an example with a Material You generated color.

While white might work better for contrast in another theme, it struggles in others. If anything, I'll have to adjust the colors created for the default theme.

[t895]

Running Google's theme builder, we loose a bit of the original color but I'll leave it here.

PR -

Theme Builder -

The buttons look better though -

[t895]

Just adjusted the colors to more closely follow the generated ones. The changes are reflected in the top comment.

[MayImilae]

I like it! A few quibbles here and there (like the text colour already mentioned) but overall I think this is an improvement. However, I have a request. Could we include a Blue theme to bring back a little bit of the old strong blue for those that want it?

[t895]

I like it! A few quibbles here and there (like the text colour already mentioned) but overall I think this is an improvement. However, I have a request. Could we include a Blue theme to bring back a little bit of the old strong blue for those that want it?

I'm interested, but let me show you a walkthrough in the light theme as well. The dark version of the default theme has been tweaked to have better contrast with the dark text. Most of the original color is preserved in the light theme though. But if you still think it should be changed, let me know.

Here's the dark theme for a side by side comparison.

[MayImilae]

So to be more specific with my previous comment, it's the pastel-ness. See the below example.

I know that's the current trend for android, but it's very different from how we have presented thus far and is just not aligned with Dolphin's aesthetic. IMO, that screen should be white with strong (not pastel) blue text at the bottom.

Though of course, that as a default with pastel as an option would be great. Or at least an option to get that kind of non-pastel look. I'm wanting something like that.

[t895]

Ah ok, I could make the default follow the previous colors with less of a pastel look but offer the the pastel one as an additional option.

[t895]

Though of course, that as a default with pastel as an option would be great. Or at least an option to get that kind of non-pastel look. I'm wanting something like that.

Just to clarify, would you like to do that only for the light theme or get the strong blue back for light and dark

[MayImilae]

Light and dark theorectically, in the sense of making a dark theme for the new design that looks kind of like the old dark theme. Though, honestly the dark theme doesn't seem to need it the same way IMO. What do you think?

[t895]

I really like how the new dark theme colors look and as long as I remove the pastel color from dialogs, I would keep it as is.

[t895]

Here's what the new defaults look like

Light -

Dark -

[t895]

Just found a couple more old dialog implementations

Converting Dialog Old -

New -

Settings Loading Dialog Old -

New -

[t895]

Also just figured that if this dialog is cancelable, we should have a clear cancel button.

[MayImilae]

I'm very happy with the updates. Material You support looks good, dark theme looks good, and the classic light theme is great for those wanting a more Dolphin-y look as well as our own publications showcasing Dolphin on Android. So design wise, LGTM.

[t895]

Just quickly brought this PR up-to-date again with the new addition of XLink Kai in #10625 and their contribution of InputStringSettings.

Here's what it looks like -

[t895]

After getting some much-needed polish in, I feel much more confident about this PR going up for review.

After some discussion with @JosJuice I've also worked out a plan for working with both shared preferences and our config system. Whenever the theme value is saved to our config it is also saved to shared preferences as well. To account for config changes outside of dolphin, I have implemented a check for whenever MainActivity opens from a cold start. If there is a mismatch between our config and shared preferences, shared preferences will save the data from our config and the activity will be recreated. This allows a user to restore from a backup and we keep the benefit of using shared preferences to load the theme value before our UI is loaded.

Additionally, I have cleaned up the code used to create every alert dialog while I was going through changing AlertDialog.Builders to MaterialAlertDialogBuilders. Things are much more consistent now. So between the dialogs and colors/theme attributes, that is the bulk of this PR in lines of code. The parts concerning the theme system are very small in comparison.

Visually, this PR is the same as it has been for the past month, I just need feedback on the settings implementation. (I'm also open to any additional requests for UI changes)

[MayImilae]

Could you please show video recordings of the collapsing top app bar? Not collapsing, medium collapsing, and large collapsing. I'm not an android user so I'm having a hard time visualizing it.

[t895]

Could you please show video recordings of the collapsing top app bar? Not collapsing, medium collapsing, and large collapsing. I'm not an android user so I'm having a hard time visualizing it.

Medium -

Large -

(Updated for better quality)

[JosJuice]

This is just my personal opinion and not my opinion as the Android maintainer, but that behavior just seems weird to me. I've never seen an app behave like that.

[t895]

This is just my personal opinion and not my opinion as the Android maintainer, but that behavior just seems weird to me. I've never seen an app behave like that.

It's not super common right now. I've mostly seen it in some system Samsung apps and a music player I use called "Oto"

Example of Oto's implementation - https://user-images.githubusercontent.com/14132249/185680048-c7aff49a-0957-4375-9bea-2d8ea66ab7b7.mp4

Additionally here's the Material Spec - https://m3.material.io/components/top-app-bar/guidelines

[MayImilae]

Does the collasping top app bar start in the pulled down state ("medium" or "large" in the material spec), or does the title start aligned with the arrow ("small" in the spec) and then the user can pull the settings down and the settings will go lower on the screen if they so please?

[t895]

It starts in the pulled down state

[MayImilae]

That seems really weird to me. In this setup, it starts closer to bottom (where their thumb will be) and then they can push it up further away from their thumb if they so wish to? But why would they ever wish to?

Hmm, perhaps the music app you mentioned has really long lists that go well off screen, and the header shrinks during the act of scrolling down the list so more of the list can be on screen? That makes sense. However the example you gave is very short and all of its content will be on screen at all times, and I can't really think of any point in Dolphin's settings where there is a bunch of content off screen that users need to scroll to reach. We deliberately try to avoid that as it's pretty intimidating to users, that's why we have the config, graphics, etc etc divisions in the first place.

Do you know of any situation where Dolphin Android would benefit from this behavior?

[t895]

Here's a better example

https://user-images.githubusercontent.com/14132249/185750816-13d38c67-ca2c-427e-8025-70b9d98cbde8.mp4

[MayImilae]

That's a very niche case, but that is definitely a spot where it provides a clear benefit. I don't think there are a lot of those, however, just because of how Dolphin's settings are distributed. Of course, we could just use small at all times instead and not need to worry about it.

So, I'm kind of neutral on this detail. It doesn't hurt anything and it's a neat little visual flourish, however, I don't think it is going to really help Dolphin in any way either. So this is kind of a subjective thing. I'll leave that to people who care about this more than I do.

[t895]

Ok, I think it's pretty and has a little bit more utility so I don't see why not. But did you prefer the large or medium size?

[MayImilae]

Personally I prefer Medium. Large has a very large gap that looks quite odd when there is only one word, IMO.

[t895]

I get that, I'll push that soon

EDIT - The medium layout is how it already exists in this PR