List items Expressive color refresh

[nsh07]

This discussion aims to discuss a potential change in the color scheme used by the app for list items. This discussion has originated out of #272.

Currently, there are a few places with slightly differing background colors that contain list items:

• Saved Articles, History, Settings, About: These screens allow complete freedom over the color implementation because these are top-level destinations.
• Language bottom sheets: The M3 design spec recommends using the surface color for the background of the bottom sheet. This should not be overridden.
• Search view: The M3 spec recommends using the surface container high color for the background of the search view. This should not be overridden.

My current suggestion is to use the Google apps' color combination (as mentioned by @deminearchiver in #272) for the screens in the first item in the above list. Colors for other views are open for discussion.

[nsh07]

I think I'll just go ahead with surface bright on surface container for the regular screens, and just surface bright on the list items for other screens (background unchanged). I hope it makes sense color-wise and the contrast isn't too high. I'll try using those colors and post screenshots here.

[nsh07]

Here's a side-by-side comparison of surface bright and surface on surface container:

Surface bright looks much better to me, the contrast against the background is milder and it fits the aesthetic of the tonal button at the top

[deminearchiver]

I think the top button should use "surface bright" as well as the list item cards, according to the examples at m3.material.io.

That's what color it uses in Google apps (namely the Android 16 Settings app).

I can also provide all the measurements that list items use in the said app, but at times they seem a bit unpolished, so let me know if you need those.

[nsh07]

Measurements are not really an issue, I'm just using the largeIncreased corner size for the top and bottom corners and the extraSmall size for the middle corners. M3 Expressive is about playful custom shapes anyway 😛

I'll use surface bright for the top button as well, thanks for the suggestion!

[deminearchiver]

I don't want to make yet another issue for the old good color contrast issues, but I found another one. This time in the language modal bottom sheet. Just letting you know.

I will try to make a PR changing it to "on color" for whatever color the selected item indicator uses.

[nsh07]

Thanks for mentioning, I'll update the bottom sheet colors too

[nsh07]

Hey, are you still working on the PR? I am making the changes to the selected item color myself so you don't need to work on it.

[nsh07]

Here's how it looks like right now. I've simply dimmed (increased the transparency of) the color of the container (primaryContainer) because I've seen some Google apps, like Messages, do something similar

[deminearchiver]

I was trying out some color combinations. I settled on leaving the unselected state as-is ("surface bright", "on surface" and "on surface variant") but in the selected state I made the background "primary container" and all the foreground elements "on primary container".

Actually, according to the spec, the selected color should be "secondary container". I don't know why "primary container" was even used in the first place.

And yes, I've been a bit busy as of lately. I am planning to open a draft PR for slowly accumulating small UI changes related to Material 3 Expressive.

[nsh07]

That makes sense, the spec does recommend using secondary container for selected content, this is a slight oversight on my part. I used primary container for the selected item a long while ago and never really corrected it. Thanks for pointing it out!

Looking forward to the PR. In the PR you can also change the transparency of the container color back to 100% while you're at it. Thanks in advance!

[nsh07]

@deminearchiver here's a version of the app with the updated colors (if you want). Another thing I've noticed is that I haven't applied the shape morph effects to list items in many screens (about, saved articles, history, settings). I'll do that in the next commit.

https://quickshare.samsungcloud.com/82cgsHpKaKqa

[deminearchiver]

Hello! I'm sorry for disappearing for a while, had other projects to work on. I have discovered that customizing list items would be a really hard task to do, since most of the properties are private, meaning we'd have to copy the framework code. I have been looking forward to suggesting other design changes, though. I will probably open a few PRs soon, stay tuned!

[nsh07]

Thanks for all the suggestions so far! I will mark those issues for hacktoberfest so you get those counted for hacktoberfest.

You can also have a look at my other project (Tomato) and suggest any design changes you'd like to see.