Android: App redesign with multi-theme system

[t895]

Top-level look at changes

• New color mappings
• New theme switcher with 5 base 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)

[t895]

I get that, I'll push that soon

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

[t895]

I reworked all of the sliders and their layouts. Things are much more consistent now.

[MayImilae]

The new slider layouts are way better. Having the value in the middle made no sense to me.

[JosJuice]

The code looks good, but there's one thing that bothers me about the design: The menu in EmulationActivity looks really plain now that its background is just white. Is there some reason why the old blue background isn't appropriate for this kind of theme? If so, do you think there's anything else we could do to make it look less plain? (Giving it the same background color as dialogs, maybe?)

[t895]

I'll put together a sample with the dialog colors

[t895]

The reason I changed the Emulation Fragment menu was because surfaces should have the most muted colors and the primary color should show itself more prominently through widgets and dialogs that appear on top of these surfaces. But here is what both options look like. Any thoughts on this, @MayImilae?

Current -
Light

Dark

Suggestion -
Light

Dark

[t895]

Additionally, I used the code from Google's MaterialAlertDialogBuilder on our MotionAlertDialog so it could be even closer to the real thing. Hopefully I could get it to be perfect in a future PR, but for now this is the best we've got. The only issue is slightly different colors than MaterialAlertDialogs when using the Material You theme.

This is what they look like in the Material Default theme.

MotionAlertDialog -

MaterialAlertDialog -

And here's the issue I mentioned on the Material You theme (Wallpaper color is purple)

MotionAlertDialog -

MaterialAlertDialog -

[MayImilae]

The reason I changed the Emulation Fragment menu was because surfaces should have the most muted colors and the primary color should show itself more prominently through widgets and dialogs that appear on top of these surfaces. But here is what both options look like. Any thoughts on this, @MayImilae?

Personally I prefer the current images you provided over the suggestion, as I don't super care for the pastely look that Material You is going for. I don't think it will last very long (especially since it still doesn't let you just select the colours, ugh).

But, if that is what you want and it is closer to what other Android apps are doing with material you, I will not oppose it. I asked for the classic theme specifically to give an alternative from Android's current look, so there's a refuge from the pastel storm.

[t895]

I could still provide the option to remove the pastel look. But that would mean we would use either the look I have currently for the default theme or make an additional case with a look closer to the original. It starts to fragment things a bit though.

Edit - What colors were you thinking about changing? I can change the colors however I want.

[JosJuice]

The reason I changed the Emulation Fragment menu was because surfaces should have the most muted colors and the primary color should show itself more prominently through widgets and dialogs that appear on top of these surfaces.

Well, it is kind of like a dialog in a sense. Not that it's exactly like a normal dialog, but it's something that gets shown on top of the normal surface, for a limited period of time and on a limited portion of the screen.

But if May thinks plain white looks fine, I'm going to trust her design chops over mine. Because from experience, she tends to make better choices for visual design than me :)

But that would mean we would use either the look I have currently for the default theme

Sounds reasonable.

[t895]

Noted, I'll keep the plain look then. Otherwise, everything is done.