Fix #4710 Resume Lesson Fragment Button Responsiveness, Icon Layout, and Dark Mode Color

[XichengSpencer]

Fix #4710 the button scaling problem in largest text setting in the resume fragment, and fix the color change in dark mode.

The use of material button has better control for the icon inside the button so that it can group icons and text together as responsive design guidelines suggested. Particularly the icon gravity part that attached the icon to the text. Also, add flex layout so that button will wrap to two lines when the screen is too small.

Set app:backgroundTint = "@null" fixes the auto color change made by the app in the dark mode.

Essential Checklist

• The PR title and explanation each start with "Fix #bugnum: " (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• Any changes to scripts/assets files have their rationale included in the PR explanation.
• The PR follows the style guide.
• The PR does not contain any unnecessary code changes from Android Studio (reference).
• The PR is made from a branch that's not called "develop" and is up-to-date with "develop".
• The PR is assigned to the appropriate reviewers (reference).

For UI-specific PRs only

If your PR includes UI-related changes, then:

Here are the testing on my own cell phone, even the second smallest text is too large for the screen so the buttons are wrapped in two rows. Only the smallest text can fit.

Screenshot 1	Screenshot 2	Screeshot 3

• Add a screenshot demonstrating UI of tablet
  |Screenshot 1| Screenshot 2|
  |--|--|
  |||

LTR

Screenshot 1	Screenshot 2	Screeshot 3

• Dark Mode Fix
  | Before | After |
  |:------:|:-----:|
  | | |

|||

[MohitGupta121]

@XichengSpencer LGTM, Thanks!

[kkmurerwa]

Hi @XichengSpencer. The PR looks good to me. I have a few issues with the PR title and description. The title could use some more explanation. Something like Fix #4710: Button Scaling and Dark Mode issues on Resume Lesson Fragment. The description should give a general explanation of the changes the fix makes. See PR #5098, #5115, and #5111 for reference.

[adhiamboperes]

Hi @XichengSpencer, is this PR ready for my review?

[adhiamboperes]

Thanks @XichengSpencer!

This LGTM.

[oppiabot]

Hi @XichengSpencer, this PR is ready to be merged. Please address any remaining comments prior to merging, and feel free to ask someone to merge your PR once the CI checks pass and you're happy with it. Thanks!