CODEWITHSUNDEEP
androidgradientxml-drawable
TryTryAgain
TryTryAgain

Reputation: 7820

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

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!

Upvotes: 13

Views: 18094

Answers (5)

Cristan
Cristan

Reputation: 14085

Converting a vector image to a PNG can easily be done in two steps:

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.

Upvotes: 1

TryTryAgain
TryTryAgain

Reputation: 7820

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.

Upvotes: 4

Code Poet
Code Poet

Reputation: 11437

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

Upvotes: 2

Booger
Booger

Reputation: 18725

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>

Upvotes: 1

MrChaz
MrChaz

Reputation: 1085

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.

Upvotes: 3

Related Questions