Android: improve app design

[Simonx22]

This PR does several things:

• migrate AppCompat to Material Components. This is recommended by Google: https://material.io/blog/migrate-android-material-components (in the future I plan on migrating to the newest standard, Material 3, once it's fully released). Note: Dolphin used MaterialComponents before but was then changed back to AppCompat: Android: Fix obscured Dolphin version #8659. I can no longer reproduce this issue.
• adjust the colors
• remove two colors: dolphin_purple and dolphin_accent_gamecube. These colors don't fit in the app IMO. Let me know if I should revert this change
• add a missing up button in the UserDataActivity
• adjust the toolbar of the main screen to better indicate which tab is currently selected

I tried to test this as best as I could but I do not own any Android TV device and Google didn't release an arm64 emulator image, so I'm unable to test on that platform. Tested on an Android device. Looks fine to me.
Let me know if anyone has any suggestions on what to change

Screenshots: (left is before, right is after)
Main menu:

Settings menu:

Cheats menu:

[JosJuice]

Overall I like this change, but I think the new style for the currently selected game list tab looks rather awkward. Not sure if that's just because I'm not used to it or not...

Regarding TV testing, what I usually do is to configure Android Studio to launch TvMainActivity on my phone. You can't test features like truly are exclusive to Android TV, like channel syncing, but the entire TV GUI is available and should work like it does on a real Android TV device.

[Simonx22]

Overall I like this change, but I think the new style for the currently selected game list tab looks rather awkward. Not sure if that's just because I'm not used to it or not...

Agreed. I reverted this change and added a white color that is being used as the tab indicator. I've also made the tab indicator slightly thicker.

Regarding TV testing, what I usually do is configure Android Studio to launch TvMainActivity on my phone. You can't test features like truly are exclusive to Android TV, like channel syncing, but the entire TV GUI is available and should work as it does
on a real Android TV device.

Thanks, that worked. Android TV looks OK to me.

[dolphin-emu-bot]

FifoCI detected that this change impacts graphical rendering. Here are the behavior differences detected by the system:

• aeon-charge-attack on mvk-osx-m1: diff
• burnout2-vehicletextures on mvk-osx-m1: diff
• DKCR-Char on mvk-osx-m1: diff
• DKCR-fast-depth on mvk-osx-m1: diff
• ea-pink on mvk-osx-m1: diff
• mp3-bloom on mvk-osx-m1: diff
• rs3-bumpmapping on mvk-osx-m1: diff

_{^{automated-fifoci-reporter}}

[Bankaimaster999]

Is there a need to show part of the name and company for the android part considering that the box art already shows the important information?
Wouldn't just having the box art shown be better?

[JosJuice]

That only works if there in fact is box art for the game. Perhaps if you only play popular releases it is the case that all your games have box art, but there are certainly games out there without box art (especially if you count homebrew releases), and being able to see the name of a game is such a critical function that it in my opinion has to work for all games no matter what.

The company is less important.

[Simonx22]

I plan on improving the game layout eventually, but I rather do that in a new PR so that this one is not getting too big.

[MayImilae]

So I typically focus on the desktop UX side of things but I was asked to give this a look.

I so, so friggin happy to see the purple get removed, finally. It was a very odd decision from way back and I never agreed with it. The coloured settings button is nice, settings icon being replaced with a back button is good, and the true white for lite mode is nice too. And the use of white for tab indication and stuff is a great touch! All in all this is much better, thank you for making this PR!

I have a nitpick however. For the dark mode cheats menu, there's a shortcut to settings that for whatever reason has black text in your screenshot. I'm not sure if you have fixed this already, but I do not care for it. It really should have white text there to match the rest of the UI.

Another small nitpick is that I don't care for the further darkening of the background in the dark mode, though that's kind of just my personal taste. White on grey is nice but white on black is searing for me, worse than black on white.

EDIT: Oh, I just noticed something else. The text in the cheats window light mode is a lighter colour than the header! The text is 21b0f3 (R33 G176 B243) and the header is 2196f3 (R33 G150 B243) IMO the text should be the header colour. And sice it's a slightly darker blue it should make the text easier to read. I'll do a quick mockup.

EDIT EDIT The text colour being different is also present in dark mode, but it's much harder to see there. You may want to standardize them to the header colour there too.

[Simonx22]

@MayImilae Thanks for the review!

there's a shortcut to settings that for whatever reason has black text

Good point! Fixed.

further darkening of the background

Apparently that's the default for Material Components. I didn't see any easy way to change this without having to edit the color for each activity. This also applies to the text. I'm fine with the background and text color as is in both light and dark mode.

The text in the cheats window light mode is a lighter colour than the header

Good catch! I've fixed this.