How to save, export, or convert an Android XML Drawable as a PNG image file?

Question

I have a gradient I really like but I created it using XML drawable:

<gradient
    android:startColor="#DD181C18"
    android:endColor="#809C7D5A"
    android:angle="90"/>

What would be an easy way to create this to a png or something similar?

What I'm really looking for is: a tool that can and instructions using that tool to make gradients using an #aarrggbb format as it's input alpha/color (90 degree angle, angles in general, would be a plus).

Thanks for any help.

EDIT: D'oh! I totally just realized ImageMagick should be able to do this. I will post the code that is my answer shortly, unless someone wants to beat me to it and receive the whole bounty!

Answer 1

In the end it was a one liner using ImageMagick!

I can't believe I didn't think to use ImageMagick before, Duh!!!

convert -size 480x84 gradient:'rgba(156, 125, 90, 0.52)'-'rgba(24, 28, 24, 0.86)' tmp.png

For reference, I used this to create a .png image file using my Android XML drawable ##AARRGGBB values. ImageMagick FTW!!!

Thanks for everyone's input.

Answer 2

Use a program like photoshop or paint.Net - they both have gradient tools and should let you set the colours in the same format as you have there.

Answer 3

Give this a try:

try {
    item.setDrawingCacheEnabled(true);
    Bitmap bmp = item.getDrawingCache();
    FileOutputStream out = new FileOutputStream(filename);
    bmp.compress(Bitmap.CompressFormat.PNG, 90, out);
} catch (Exception e) {
    e.printStackTrace();
}

Here item is the view/view group that I want to render.

I actually use the same fragment (minus the file write) for some on screen rendering and it seems preserve transparency.

Note About Colors:

Colors can be specified in android using hexadecimal values. A byte (8 bits) are available for each color value in the pattern ARGB (total 32 bits). A stands for Alpha, R stands for Red, G for Green and B for Blue. Each component can have values between (0, 255). Note that:

decimal 0   = hex 0x00
decimal 255 = hex 0xFF

So if you wanted a white color with opaque 'Alpha(no transparency) you would use#FFFFFFFF. For Black#FF000000. For Grey#FF808080.80is hex value of decimal 128 and gives you half of full intensity white. so80` gives you median Grey.

Use Hexadecimal arithmetic to get values of your decimal colors.

AFAIK, Angle for a radial gradient should not make any difference. Try all of this in GIMP or read GIMP tutorials. Better still use Photoshop if you can (90 days Trial versions available).

Answer 4

You could also create an activity with just the gradient as a background, and nothing else on the screen.

Run the app on an emulator or device, and use DDMS to take a screen capture. You will then have a nicely rendered PNG to save, and you can create whatever size you wish, by varying the screen size of the emulator you are using.

Your XML could look like this:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@drawable/your_gradient">
</LinearLayout>