Enhanced UI design of tempo and pitch adjustment options

[u7280973]

What is it?

• Bugfix (user facing)
• Feature (user facing)
• Codebase improvement (dev facing)
• Meta improvement to the project (dev facing)

Description of the changes in your PR

Enhanced UI design of playback parameters (tempo and pitch) by implementing a more button-like design to improve accessibility.

Before/After Screenshots/Screen Record

• Before:

• After:

Fixes the following issue(s)

• Fixes Tempo and Pitch adjustment options with a button like design instead of flat text based #8962

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.

Due diligence

• I read the contribution guidelines.

[opusforlife2]

The "-/+100%" in the top two circles for Tempo look a bit cramped. Try some other shapes? Maybe squares there as well?

[opusforlife2]

Thanks for the quick change! Could you update the screenshot?

[u7280973]

Here is the updated screenshot:

[opusforlife2]

Does the tappable area correspond to the coloured area? If so, that's a nice accessibility boost, I think.

[Stypox]

I don't think these changes look good: the style of the buttons is inconsistent and does not fit well with the app's look. And they also do not increase accessibility that much, since the new buttons do not look more like buttons than before. The problem is that you are not using standard Material Design buttons. Try, for example, the OutlinedButton or the ContainedButton as seen here.

[opusforlife2]

@u7280973 ANU student?

[opusforlife2]

Hi. Since a different layout has been decided upon after discussions, this PR is being closed. Please don't hesitate to get in touch if you're interested in working on the proposed design!

[SameenAhnaf]

@u7280973 Suggested playback speed layout

#8962 (comment)