[android] Bolder and Bigger Text

[11happy]

Overview: This pull request fixes #5316, where Users are requesting bolder and bigger text for street names to enhance visibility.

Changes Made:

• In the layout_nav_top.xml file: The background color for the navigation layout is changed from white to #01735C (road sign green).
• In the font_sizes.xml file:The text size for the street name (text_size_nav_street) is increased from 17sp to 19sp. -In the styles-text.xml file:The style named MwmTextAppearance.NavStreet is updated to include bold text style.

Testing:

• Tested the updated code to ensure that updated code is working as expected.
• Verified that other functionalities remain unaffected.

Dependencies: No dependencies on other pull requests.

[Jean-BaptisteC]

The right solution is more complex, check this #3645 I'm not sure update background color increase visibility and color don't respect Organic Maps color.

[11happy]

Sure I will look into it.

[11happy]

@Jean-BaptisteC I have read the #3645 , now I wanted to ask how should I proceed like what is expected, also regarding color can you please guide me . Thank you

[Jean-BaptisteC]

The right solution is to develop a logic to autosize the size of text following the longer of street name size. This features need to be able to adapt following if devices is in portrait or landscape.

Why update background color? The main issue here is to increase size of text with keep a right height of street name container in landscape.

[11happy]

Thank you for the guidance, I will update the solution accordingly.

[11happy]

can we go with android:autoSizeTextType="uniform" ? I think may be suitable for the current needs. reference : https://developer.android.com/develop/ui/views/text-and-emoji/autosizing-textview

[Jean-BaptisteC]

Not enough we need to specify min and max size font. And this feature is supported on Android 8 et more. Our implementation need to work on older devices. More information here: https://stackoverflow.com/questions/63535739/how-can-i-make-textview-auto-size-in-android On older devices app:autoSizeTextType maybe work, need to be tested

[fitojb]

... and color don't respect Organic Maps color.

I think it's fine to deviate from the brand color in this particular instance. Once #7022 is merged, the app will have a sea of green (in the right places). I think replicating a street sign in the app is good for driving, when quick recognizability is important.

[euf]

Please don't introduce #01735C for top bar background. Not only far from branding palette, it also has really bad contrast with foreground: it's only of 5.28, which is too low for this task.

[fitojb]

@euf: ???? I don't understand how you came to that conclusion: per the link you gave, the contrast is "good" for large texts, and it even says...

Also, at the risk of repeating myself on the branding question, quick recognizability at a glance trumps other criteria. See how other apps do it.

[euf]

Okay, let me explain my position in detail. Adding a new color to an app palette out of nowhere is problematic, because it leads to inconsistent and dirty looks. Different shades and hues are supposed to be a part of a system, which helps to convey semantic meaning to parts of the UI as well as take into account accessibility issues. While some parts of such system would always be arbitrary and based on aesthetic preferences, others are supposed to keep in line with them.

The official Organic Maps color is #006B36. It already has better contrast of 6.65, close to 7.0 threshold and okay for large text. APCA is -87.3, which is acceptable for this font weight and size.

One could argue that even better contrast is needed for a Street Name Label, because it's important to be readable with a glance. This PR tries to solve exactly this issue, in part by increasing the font size from 17sp to 19sp (and font sizes need a system too, but that's for another time). So how do we get even better contrast from an official green?

Luckily we do have a palette already:

I've extracted the hexcodes to access them in a convenient manner.

Greens	Grays
#e5f0eb Green-1 (Background)	#ffffff Gray-1 (Background)
#cce1d7 Green-2 (Background)	#f5f5f5 Gray-2
#99c4af Green-3	#e5e7e6 Gray-3
#66a686 Green-4	#d9dbda Gray-4 (Background)
#33895e Green-5 (Visual Elements)	#bfc2c1 Gray-5
#006b36 Green-6 (Primary Color)	#808683 Gray-6
#006031 Green-7 (Text on Green-1)	#4c5651 Gray-7
#00562b Green-8	#26312c Gray-8 (Secondary Text)
#004020 Green-9	#000d07 Gray-9 (Primary Text)
#00351b Green-10	#000503 Gray-10

We can see that #00562b Green-8 is a perfect candidate for a Street Name Label background:

• just two shades darker than primary #006b36, but the same familiar color scheme;
• leaves a couple of brighter and darker shades for other UI elements with either bigger or smaller z-index (virtually "on top" or "below");
• great contrast to white (8.88 WCAG, -94.3 APCA);
• even reminds of a roadsign color!

That's how you use a color system. For the hues not present in the table above (say, we need reds and yellows) OKLCH could be used for generating colors with similar Lightness / Chroma, and contrast should still be considered too.

Also I'm not an Android developer, but I guess specifying hexcodes in xmls like android:background="#01735C" is suboptimal. I see a android:background="?cardBackground" line in the diff, so there should be some ways to manage a palette, so adding a new android:background="?streetNameBackground" would make life easier for other developers.

[biodranik]

I agree with @euf

Introducing a new color should have serious reasons. It's better to reuse the familiar palette.

Also it would be great to see how longer streets look with the fix. And how it looks in landscape.

[fitojb]

#00562b is okay with me. I never suggested to use a color outside a palette, I only ever said that we shouldn’t use the official brand OM color (#006B36), despite the goalposts of this convo being moved.

[rtsisyk]

Thanks for contributing to Organic Maps. Could you please collaborate with the @organicmaps/design folks on the proposed changes?