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!

Rosarosabel

show it in empty layout and use image snapshot from eclipse feature or run on device and follow the same process to get high res image – Acquaintance

Unless, I'm missing something...this also wouldn't preserve the transparency. – Rosarosabel

what about posting the code? :) – Birkett

@Birkett what code are you referring to? – Rosarosabel

@Rosarosabel Ach, sorry - I didnt notice your answer on the bottom of the page :) – Birkett

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.

Rosarosabel

how do I do that – Klug

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.

Taxiway

I only have access to free and OSS and OS. I haven't found out a way to achieve this with GIMP. Again, the gradient isn't the problem, rather, preserving the transparency with the gradient is the problem I'm facing. – Rosarosabel

Paint.Net is free and preserves transparency. – Williemaewillies

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

Rosinski

BTW are you sure gimp cannot save gradients with transparency? A quick look at docs.gimp.org/en/gimp-concepts-gradients.html suggests creation is possible. Saving follows as a natural consequence. – Rosinski

Thanks, I am quite a freshy and don't know what to do with that code to create a .png file from my xml file. GIMP absolutely can save a gradient with transparency. I just don't know what DD and 80 equal as far as percentage of gradient AA (alpha) and how to incorporate 90 degree angle. – Rosarosabel

I'm afraid there's no shortcut here. You should be doing some reading. For colors here's a short and sweet primer: w3schools.com/html/html_colors.asp – Rosinski

Added some info about colors, see if it helps. – Rosinski

Thanks @ManishGupta I'm looking for a program that will do this not to achieve it programatically. Thanks for the added info, although I already understand those concepts. – Rosarosabel

Try all of this in GIMP or read GIMP tutorials. Better still use Photoshop if you can (90 days Trial versions available). – Rosinski

**What I'm really looking for is**: a tool and instructions – Rosarosabel

read GIMP tutorials for instructions :) It's been 15 days since your post. You'd have mastered gradients in gimp by now. – Rosinski

I'm looking for an easier way...ideally plopping my #AARRGGBB start and end into a couple boxes and being able to export a png. I've realized I can do this with ImageMagick and have updated the question. I will be posting my solution shortly. – Rosarosabel

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>

Confusion

Thanks for the suggestion @Booger, unfortunately, that wont preserve the transparency though. – Rosarosabel

Answer 5

To convert a vector image to a PNG:

Converting an Android Drawable to an SVG

These file formats are so similar, you can easily convert your vector to an SVG by hand (see this answer), but there are also websites who can do this for you.

Render the SVG as a PNG

There are many websites who can do this. A quick search should yield plenty of results.

Scold