2

I tried to do some linear gradient on my background for my app, and it resulted with color banding.

What I did:

I created a shape called window_background_app.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="45"
        android:endColor="#Fe005694"
        android:startColor="#fe2D8ACC"
        android:type="linear" />

</shape>

I used that shape in a style to apply to the background:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@drawable/window_background_app</item>
    </style>

</resources>

I used that style in the manifest of my app:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:name="generic_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

Problem

When starting my app, the background displayed some banding with the gradient background_with_banding

I found in similar questions, (for example this one) that I should:

  • Try to set dither to true for the background. Problem: use of dither is deprecated now.
  • To set the Pixelformat to PixelFormat.RGBA_8888. Problem: that did not change anything for me.

I got this problem on:

  • a OnePlus 5t Api 28 (real device)
  • Samsung S8, Api 28 (real device)
  • a Pixel 2 Api 24 (emulator)
  • a Pixel 2 Api 22 (emulator)
  • a Pixel C Api 27 (emulator)

The banding did not appear on:

  • Samsung Galaxy J3 Api 22 (real device)
  • Samsung SM-T533 Api 22 (real device)

Question

I'm not sure if the problem is due to updates on Android version or of from material (or both). And another problem I had is that a lot of solutions I could find online were quite old (most recent were around 2014).

So my question is:

Are there some new solutions for color banding on gradient since dither=true and pixelFormat=RGBA_8888 ?

EPuillandre
  • 184
  • 9
  • I have this effect in Firefox. I always thought this is wanted behavior to increase performance. Am I wrong? – somega Feb 26 '20 at 17:16
  • @somega can you be a bit more precise please ? Do you mean that on the app firefox on your phone, there are gradient with banding ? – EPuillandre Feb 27 '20 at 16:11
  • On Firefox on Debian I have colour banding (for years). I always thought this was wanted behavior. But [wikipedia](https://en.wikipedia.org/wiki/Colour_banding) says it's not wanted behavior. If you get this on Android you could make a bug report. Of course you should always test your software against latest version of Android (maybe it's already fixed). – somega Mar 02 '20 at 12:28

2 Answers2

0

I'm pretty sure dithering doesn't do anything if the pixel format is RGBA8888, and therefore cannot help with the banding between visually-adjacent 24bit RGB hues.

This is probably an Android limitation, which arises from the OpenGL limitation that dithering is only for lower bit depths than 32 bit. OpenGL is the backing implementation of Android's Views.

So, the solution might be using a PNG file for the gradient with dithering already built-in by your paint program.

Tenfour04
  • 39,254
  • 8
  • 47
  • 96
0

Surprisingly, adding an alpha channel removed the banding completely in my case. Just set the alpha value of all the colours to 99%, and this would completely remove the banding.

To set the alpha value, you can add FE to the beginning of the HEX value, like #FFFFFF to #FEFFFFFF
OR
Click on the little coloured square besides the line numbers in Android Studio, and then you can change the alpha value.

CoolCoder
  • 675
  • 3
  • 17