Question

I’m trying to place a background in my activity, but the image quality is not the expected.

The image has a simple gradient above blue stripes, and currently looks like this:

My activity layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/background_register"
    android:drawingCacheQuality="high" >
</LinearLayout>

The background descriptor (drawable/background_register):

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:tileMode="repeat"
    android:gravity="center"
    android:src="@drawable/background_blue_565" />

Currently I have an XML file describing a BitmapDrawable, which is the actitivy’s LinearLayout background. But I’ve tried everything I found so far. Enabled dither, antialias, tile, RGBA_8888 modes… You name it. Does anyone have a different solution or idea I could try? I’d be very grateful.

Btw, I’m currently developing the app in a Galaxy S II.

Answer 1

First of all, make sure that your original image looks good so you’re not just getting the problem from there.
Then, in your onCreate() method, do:

code1:

getWindow().getDecorView().getBackground().setDither(true);
getWindow().setFormat(PixelFormat.RGBA_8888);

Deprecated:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DITHER);

And to load your image explicitly as a 32-bit image (RGBA-8888 configuration) add the following where you load your views:

code2:

BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap gradient = BitmapFactory.decodeResource(getResources(), R.drawable.gradient, options);

findViewById(R.id.main).setBackgroundDrawable(new BitmapDrawable(gradient));

Comparison between different approaches:
(these are all screenshots from the resulting application)

My source images (64 colors to the left, 24 bit to the right):
image1 and image2:

1: Raw 64-color image (image1) set as background from layout XML:

2: The same image (image1), using code1:

3: The same image (image1) using both code1 and code2:

4: image2, loaded with code1 and code2 (in this case the dithering is not really important as both the source and destination use 8 bits per color):

Notice how the resulting artifacts in image 3 already exists in the original image.

Note: if anyone knows how to shrink the images down a bit, feel free to edit this post…