Improve title readability against light background

[StefRe]

Especially for wide cover images (CDs etc.) and/or long title (3 lines high), the title in white font is barely or not at all discernible if the cover image is predominantly white or heavily patterned. A black font shadow
greatly improves readability in such cases.

left: current appearance      right: improved with shadow

An alternative solution would be to programmatically increase the hight of the lower gradient view (gradient_bottom) depending on the number of text lines but in my opinion the shadow is much easier to implement and looks just fine.

I couldn't figure out how to change the shadow color to match the background color. So we also have a dark shadow when there's no cover image, but I think it looks OK (below left).
I noticed that when you start to slide up the toolbar the shadow of the whole truncated string of the original (single line) collapsing toolbar is being displayed (below right). This seems to be a bug in the implementation of the multi-line collapsing toolbar but it'is far beyond my knowledge of android to find the exact place where the bug happens, let alone to fix it. I guess it's just a petty annoyance everyone could easily live with.

left: shadow against uniform background      right: shadow artifact

(sorry for the trailing line feed change, it was automatically added by Android Studio and i didn't notice it at first)

[johan12345]

Hm, yes, text shadow might have some bugs with the multiline functionality of the CollapsingToolbarLayout (something we originally developed ourselves and eventually got merged into the Material Components library) - as far as I can see in your screenshot, the shadow in the first line is also more opaque than in the other two lines.

Independently of that, I'm also not really in favor of using a text shadow, as it's not something that usually appears in Material design. Instead, the guidelines state:

Don’t place imagery in a bar that makes the top app bar’s text and icons illegible.
(https://material.io/components/app-bars-top#anatomy))

So something we could try instead would be to replace the gradients with a darkening of the whole cover (e.g. using a simple semi-transparent black box) in case it is too bright. I hope that would look okay...

[StefRe]

the shadow in the first line is also more opaque than in the other two lines

I noticed this too and thought that it's just a visual illusion due to the increasing "dimming" of the bottom gradient view, but you're right - this doesn't explain the reduced shadow in case of the uniform red background (no cover image)

So something we could try instead would be to replace the gradients with a darkening of the whole cover

something like this?

or this?

Unfortunately, the available width of the text lines seems to be given by the space in the toolbar remaining between the back button and the menu entries. So it would be easier (and better looking) if the text could use the full width in the expanded toolbar state so that it would be only 1 or 2 lines high and be better protected by the bottom gradient:

I'm not sure if this can be done using your enhanced collapsing toolbar.

---

Further, the gradient is only shown if the the cover image is sufficiently white

opacclient/opacclient/opacapp/src/main/java/de/geeksfactory/opacclient/frontend/SearchResultDetailFragment.java

Line 1337 in 9876471

gradientBottom.setVisibility(isWhite ? View.VISIBLE : View.GONE);

If the image "is not white" but heavily patterned (and hence no gradient is displayed) the text may not be very legible either:

One could also ask the question whether we really need the title text at all if we have a cover image, as the cover image usually shows the title (although maybe too small to read it on a typical device display size) and it's given in the details below anyway.

[johan12345]

something like this?

Yes, probably something like the first example, or even darkening the whole image (when a lot of it is already covered with text anyway). At least I don't have a better idea right now...

Unfortunately, the available width of the text lines seems to be given by the space in the toolbar remaining between the back button and the menu entries. So it would be easier (and better looking) if the text could use the full width in the expanded toolbar state so that it would be only 1 or 2 lines high and be better protected by the bottom gradient

It might be possible, but would further complicate the transition that is needed between the expanded and collapsed state. Unfortunately I don't have time to work on that at the moment :/

Further, the gradient is only shown if the the cover image is sufficiently white

Maybe the threshold for "whiteness" needs to be adjusted as well.

One could also ask the question whether we really need the title text at all if we have a cover image, as the cover image usually shows the title (although maybe too small to read it on a typical device display size) and it's given in the details below anyway.

Yes, the problem is that we cannot know if the text is readable (it might be too small or the image might have too low resolution), so having the title is still helpful. Also, in the collapsed state (when scrolled down) the cover is not visible anymore.