Android rendering shade of blue wrong on some devices

Asked 22/9, 2015 at 17:51 Answered 4/3, 2016 at 17:28

I'm running an app on various devices and on two a certain shade of blue looks wrong. Please see the attached image. Any ideas why that is? If I replace the color with a different one without any other changes, everything looks fine.

EDITOR's NOTE: Original poster states that there is a single colors.xml file in the project's resources and the color is defined once. The color is defined by a name (@color/pbr) and has a value of #447AD4. The layout for the screenshots above uses the same resource name throughout, but renders as different colors.

Mollie answered 22/9, 2015 at 17:51 Comment(5)

are you absolutely sure the two colors have same hex code? – Rabbitfish 13/1, 2016 at 22:9

Yes, I use a color resource for this blue everywhere in our app. The hex code for this color is #447AD4. When I use a different color, everything is as expected on all devices. – Mollie 14/1, 2016 at 22:56

Is it possible for you to provide a minimal working example? (well, in this case working means "not working" :-) ) – Splendiferous 15/1, 2016 at 9:40

The two "broken" screenshots are from devices larger than all the others. When you say you can set a different color - how are you doing that? Are you changing the <color name="my_color">#447AD4</color> value, or are you changing your layout to say color="@color/my_other_color"? If it's the second option, you could certainly have a different color defined in a xxhdpi or xxxhdpi resource file somewhere. – Shophar 19/1, 2016 at 0:43

To be clear, I have one color.xml file with all my colors and there is only one definition of this color (#447AD4) and it's used throughout the application. – Mollie 21/1, 2016 at 11:44

So this looks like an issue with tintMode. The reason the colors look different is the transparency. By default, Drawables in Android have a tintMode of SRC_IN, meaning they will keep their color but use the alpha of whatever is underneath them during rendering. From the looks of it, there are views underneath the blue ones that are not 100% opaque.

To solve this you could explicitly set the tintMode to something like SRC_OVER which will keep the alpha you set intact. The other option is instead of setting at the background to a color, set it to a Shape Drawable with a solid fill. That will make sure that the view is opaque and will have a consistent color.

Tractile answered 4/3, 2016 at 17:28 Comment(0)

Using paint.net I could verify that the text color "Search for your food" is the same on every device which rules out a device-global shade or an error in the screenshot retrieval process

For anyone wanting to verify this: take care that you check a color in the middle of a letter, e.g. the center of the f cross so you don't get anti-aliasing colors.
UPDATE: this indicates that the differing area colors are not a device-global color handling issue since at least the text color is the same

Make sure that you both did not specify

Different layout files
Different color drawables

for different Android versions/ screen densities / screen sizes

Splendiferous answered 14/1, 2016 at 14:0 Comment(6)

+1 for the link, which will help future readers, if not the asker, but the question is about the color of the area the text is in, not the text itself... – Sonyasoo 19/1, 2016 at 0:41

I added an edit to make the point more clear - I just ruled out some weird device-specific color tint – Splendiferous 19/1, 2016 at 9:40

Could you post your color.xml, styles.xml and layout.xml file so that I can get a better look at the code? I think there might be an issue with the theme. – Fascicle 19/1, 2016 at 15:14

I spoke to the original developer. It looks like all three parts of the layout that are blue link to the same resource name (@color/pbr). There is also only one layout file for this screen. There is no other configuration that has this screen defined and the screen defines the same color three times, but on some phones they display as different colors. – Fiasco 21/1, 2016 at 5:20

You can also redefine colors for different configurations, so linking to the same resource name can still yield different colors – Splendiferous 21/1, 2016 at 8:29

As the dev clarified in the original post (comments). only a single definition of @color/pbr exists in the codebase. Furthermore if you look closely top two parts of the screenshot you can see the color change at an angle to the left/right of the search bar. That is a single cell with a flat background. Any suggestions? – Fiasco 22/1, 2016 at 2:12

Have you checked that the resource that you're referencing (the color) is not provided multiple times for different screen resolutions using configuration qualifiers?

For example, make sure you don't have multiple colors.xml or styles.xml in a values-mdpi folder or values-xxhdpi folder. If it is referenced in more than one folder, that's your issue.

http://developer.android.com/guide/practices/screens_support.html#qualifiers

Amberly answered 19/1, 2016 at 20:56 Comment(0)

You might have customized the theme in

res/values/style.xml

Also customize similarly in

res/values-v11/style.xml and res/values-v14/style.xml

(Create the values-v11 and values-v14 folders if not already there and copy paste your style.xml into them. If the folders and style.xml inside them is already them, append your stuff and make sure you do not remove anything important by overwriting the file.)

Source

Coxswain answered 20/1, 2016 at 3:48 Comment(0)

It may be a device specific issue with the color #447AD4. Different smartphone manufacturers use different type of screen in their device. So it is possibly a device specific issue i think.

Iva answered 19/1, 2016 at 20:20 Comment(3)

That wouldn't explain why the pictures show a difference on the same monitor. – Burnejones 19/1, 2016 at 20:44

@Burnejones Pictures show a difference on the same monitor because these are screenshots taken by the device's screen which implemented and generated the wrong color shade in screenshot image – Iva 19/1, 2016 at 21:32

The device's screen does not affect the screenshot unless there is software affecting the rendering. – Burnejones 19/1, 2016 at 21:45

REASON

There is no "silver-bullet" reason for that but one of the possible reason could be drivers. Certain chipset manufacturers have done an especially bad job at updating their graphics drivers, which makes the colors in apps, games and any graphic content inconsistent across phones. Developers might encounter entirely different color schemes on various Android devices, none close to what they intended.

Samsung screens use differently shaped pixels.

This issue may be due to PenTile screen and the main difference is that the red, green, and blue subpixels aren't the same as a normal display.

Basically, instead of each pixel getting a red, green, and blue subpixel that are the same size, a PenTile pixel gets red and green or blue and green subpixels. The red and blue are larger than the green to balance the brightness. Because there are twice as many green subpixels than red and blue on your phone, your color choice is probably out of gamut on these devices.

SOLUTION

All devices pick colors at different intensities. You cannot do much about it. Its hardware that renders the images and colors in it. If you want consistency among all devices you have to calibrate your monitor.

Domingo answered 20/1, 2016 at 21:51 Comment(1)

Follow the links for better understanding the issue and solution. – Domingo 20/1, 2016 at 21:55

Recommended topics

Hot tags