Migrate XML-based views to Material 3

[Isira-Seneviratne]

What is it?

• Feature (user facing)
• Codebase improvement (dev facing)

Description of the changes in your PR

• Migrate the existing XML-based views to use Material 3.
• Clean up some of the existing theming code, as it was causing some theming issues.

Before/After Screenshots/Screen Record

Before	After

APK testing

The APK can be found by going to the "Checks" tab below the title. On the left pane, click on "CI", scroll down to "artifacts" and click "app" to download the zip file which contains the debug APK of this PR. You can find more info and a video demonstration on this wiki page.

Due diligence

• I read the contribution guidelines.

[Angelk90]

@Isira-Seneviratne : Nice work, why the button with the "+" (plus) in that color?

Maybe this color looks better#6c5d2f:
`

Look: https://material-foundation.github.io/material-theme-builder/

[Stypox]

Cool, thanks! I have one complaint: the color of the top bar serves the purpose of giving an indication of which service is currently active, and now that indication is lost. So we should either bring back the colored bar (just in MainActivity), or we find some other way to clearly indicate which service is active. Maybe a chip in the top bar replacing the tab name? And then the tab name could be put next to the tab icon (only for the selected tab):

@Isira-Seneviratne : Nice work, why the button with the "+" (plus) in that color?

I guess there's something wrong in the color scheme we have right now?

[snaik20]

Cool, thanks! I have one complaint: the color of the top bar serves the purpose of giving an indication of which service is currently active, and now that indication is lost. So we should either bring back the colored bar (just in MainActivity), or we find some other way to clearly indicate which service is active. Maybe a chip in the top bar replacing the tab name? And then the tab name could be put next to the tab icon (only for the selected tab):

@Isira-Seneviratne : Nice work, why the button with the "+" (plus) in that color?

I guess there's something wrong in the color scheme we have right now?

That should be doable I think. We will need to generate the color pallete for each service from the Material theme builder tool. More info.

I was able to match the default (Youtube) colors in Compose using that tool in #12385