CODEWITHSUNDEEP
androidimagebackgroundgradient
gnclmorais
gnclmorais

Reputation: 4971

Awful background image quality in Android

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:

LinearLayout background

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.

Upvotes: 16

Views: 16271

Answers (3)

Jave
Jave

Reputation: 31846

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:
64-color24 bit
1: Raw 64-color image (image1) set as background from layout XML:
Raw image
2: The same image (image1), using code1:
Dithered image
3: The same image (image1) using both code1 and code2:
explicit 32bit
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):
higher original quality

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...

Upvotes: 42

Gareth Davidson
Gareth Davidson

Reputation: 4917

The problem is your PNG has been converted to 256 colours, open your APK in your ZIP tool of choice and check manually. If that's the case, make sure that your PNG has:

  1. An alpha channel
  2. One pixel which is slightly transparent

This should prevent it from being converted to an indexed palette.

Upvotes: 6

Astronaut
Astronaut

Reputation: 7041

it looks like an image issue to me. what are the setting you are saving the image and format? It looks like compression artifacts from where I am looking.

Upvotes: 0

Related Questions