Optimize UI

[Hamza417]

What is it?

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

Description of the changes in your PR

Optimize the existing layout and how they work in the app with various accessibility improvements.

Before/After Screenshots/Screen Record

The list is optimized, the titles have better visibility and channel names have been italicized.

The grid list were incorrectly laid out in the app, the icons weren't evenly placed and have weird spacing, the same could be fixed easily by removing the fixed width and height constants and applying aspect ratio based resizing for the thumbnails. The rest of the changes were the same as list view.

The title has been emphasized, and comment usernames have better visibility now. The emphasis from the "X REPLIES" have been reduced to lower case so that it can be a little less loud.

Fixes the following issue(s)

• Fixes Inadequate accessibility of the app layouts and improper contrast between various views. #11434

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.

[TobiGr]

Thank you for the work.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[Angelk90]

@Hamza417 : could you check if it is optimized correctly on tablets too? I noticed that there are some problems on tablets. you could also take a look at the stories. #6869

[Hamza417]

@Hamza417 : could you check if it is optimized correctly on tablets too? I noticed that there are some problems on tablets. you could also take a look at the stories. #6869

Thanks for pointing out the exact issue, I'll see if these changes can be included as well before this PR gets merged.

[acrodemocide]

Code changes look good. I pulled down the APK and tested on my phone. I really love the new UI updates. Everything else on the APK appears to be working as expected.

[Stypox]

I built an APK if you want to test: app-debug.zip

[Stypox]

Hello and thank you for your design proposal @Hamza417. We have discussed with the team the new design and decided to reject it unfortunately, for these reasons:

• NewPipe is currently undergoing a refactor, and we are therefore limiting PRs to only bugfix or maintenance PRs
• During the refactor the UI is going to be redesigned anyway, see for example Migrate comment fragments to Jetpack Compose #11060 (in particular the "After (improved design)" screenshots)
• It is difficult to reach consensus on how exactly the UI should look like, and merging a PR like this one without consulting a designer and making a poll for users, might be controversial
• I tested the APK and noticed that various items have not been redesigned (e.g. playlists), but if we want to change things we need to first agree on some rules to apply everywhere in the app (e.g. all titles should be bold, ...)