LG G watch not displaying 32-bit Images or Gradients with full color depth

Question

I've been struggling to get gradients to appear smooth on my LG G Watch running Android 5.0.1.

Before you mark as a duplicate, I have tried every answer for several posts (like Why android lose image quality when displaying a png file?, Is it possible to dither a gradient drawable?, android:dither="true" does not dither, what's wrong?, Color Banding Android Solution, Color banding and artifacts with gradients despite using RGBA_8888 everywhere, Color banding only on Android 4.0+, Awful background image quality in Android), but none seem to apply.

---

Here are my steps for creating a gradient

1) Load Sample 'Wearable: Watch View Stub' project from the latest Android SDK

2) Change the rect_background.xml drawable to:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/rect_corner_radius"/>
    <gradient android:startColor="@color/light_grey"
        android:endColor="@color/white"
        android:angle="90"/>
</shape>

3) Here is what it looks like on the emulator

4) Here's what it looks like when I do a screen capture from the device:

5) But when I look at it in person, there is terrible banding: (it looks far worse in real life; the image doesn't do it justice)

The following is a simulated image of what it looks like in person (128 colors):

I have also tried:

• Using a png bitmap (24-bit)
• Using a png bitmap with 1 transparent pixel (32-bit)
• Using a png bitmap with all semi-transparent pixels (32-bit)
• Using a png bitmap with reduced bit-depth (256 colors)

• Using a jpeg with 100 quality.

• Manually setting PixelFormat to RGBA_8888 in Activity before and after create layout

• Turning on dithering in the activity
• Loading the bitmap from code using a custom bitmap loader (setting pixel format, dithering, etc., see Awful background image quality in Android)
• Turning off any sort of scaling for the ImageView
• Putting the image in drawable, drawable-hdpi, and raw folders
• Unzipping the APK and verifying that the image was uncompressed.

All of these show up the same way.

---

How do I get this to appear correctly on the device?

Is anyone else seeing this issue? According to this site, the LG G Watch has a color-depth or 24-bit, which should be full 8 bits per channel. Normal images on the device appear correct--no noticeable banding.

Answer 1

I was able to generate a smooth gardient on my LG G Watch like this:

Step 1:

Manually set the pixel format to RGB_565

@Override
public void onAttachedToWindow() {
    super.onAttachedToWindow();
    getWindow().setFormat(PixelFormat.RGB_565);
}

Step 2:

You have to deactivate the hardware Acceleration in the Wear AndroidManifest.xml . Add this property to the application tag:

android:hardwareAccelerated="false"

Step 3:

Define a new method to draw your background:

public static Bitmap drawableToBitmap (Drawable drawable, int height, int width) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable)drawable).getBitmap();
    }
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);

    return bitmap;
}

Step 4:

Apply it to your layout:

Bitmap bpBackground = drawableToBitmap(getResources().getDrawable(R.drawable.rect_background), 280, 280);
BitmapDrawable bdBackgorund = new BitmapDrawable(getResources(), bpBackground);
myLayout.setBackground(bdBackgorund);

Unfortunately I wasn't able to get it working inside of the WatchViewStub, but I think this probably already helps you solving the problem.

Step 1 & 2 are necessary to get a decent result, Step 3 & 4 increase the quality again.

You can find the whole solution here: https://github.com/lukeisontheroad/WatchViewStubStackOverflowSolution