Develop Reference

Change gradient center dynamically

I have the following gradient
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:centerColor="#42f448"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#000000"
android:startColor="#000000"
android:type="linear" />
What I need to do is change the center of the gradient based on position change on a ListView. Is it possible to create this gradient programmatically?
I've tried this approach, but if I change the center values, nothing happens, it remains fixed:
int colors[] = {0xff000000, 0xff42f448, 0xff000000};
GradientDrawable shape = new GradientDrawable();
shape.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM);
shape.setColors(colors);
shape.setGradientCenter(0.3f, 0.3f);
view.setBackgroundDrawable(shape);
What am I missing? Thank you.

You can achieve your goal by using Shader
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
#Override
public Shader resize(int width, int height) {
return new LinearGradient(width/2, 0, width/2, height,
new int[]{0xff000000, 0xff42f448, 0xff000000},
new float[]{0, 0.3f, 1}, // start, center and end position
Shader.TileMode.CLAMP);
}
};
PaintDrawable pd = new PaintDrawable();
pd.setShape(new RectShape());
pd.setShaderFactory(sf);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
layout.setBackground(pd);
} else
layout.setBackgroundDrawable(pd);

Problems resizing a vector drawable programatically

This album explains what I want to do, and the problem I'm having when the vector doesn't resize: http://imgur.com/a/HM3K2
This is the approach I've taken to try scaling the vector, but it doesn't seem to work:
private Bitmap drawCirclePreview(int color, Shape square) {
//An object from my 'VectorOverlay' class which resolves the resource...
VectorOverlay circleOverlay = new VectorOverlay(color);
//...and returns a drawable
Drawable drawable = circleOverlay.drawCircleOverlay(this);
Bitmap bitmap;
//Make bitmap with same dimensions as the square (redundant, I know)
bitmap = Bitmap.createBitmap(square.getWidth(), square.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
Inside the VectorOverlay method that is being used:
public Drawable drawCircleOverlay(Context context){
Drawable drawable = ContextCompat.getDrawable(context, R.drawable.circle_overlay);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable, color);
return drawable;
Then I create layers for the new LayerDrawable:
private void drawSquarePreview(){
Drawable[] layers = new Drawable[2];
//[...] omitting code for when the square object is created and drawn
layers[0] = new BitmapDrawable(squareBmp);
layers[1] = new BitmapDrawable(drawCirclePreview(Color.parseColor("#4af9d8"), square));
LayerDrawable layerDrawable = new LayerDrawable(layers);
ivPreview.setImageDrawable(layerDrawable);
}
Yet, the outcome is still as the pictures show. I'm stumped. I've been searching for answers for a long time now and I still can't find a solution. Any help would be greatly appreciated.
ADDITIONAL INFO: I'm using the Support Library to handle vector drawables on older APIs.

There is no need to use a vector for this. Vectors are slower and messier. You can simply create a circle shape (Drawable) in XML.
Like this;
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FF000000"/>
<size android:width="40dp"
android:height="40dp"/>
</shape>
Just remember that the size variable is a relative size, but the shape can be scaled to any size. I set the color to black, as that way you can tint it to any color.

Creating bitmap from a drawable

I am going to be working on an app which requires drag/drop on a Canvas. Basically, I want to take a ShapeDrawable and convert it into a Bitmap which I can have the user drag around the screen. This is a simple exercise in itself.
However, I want to add text inside my shape. Is there a way I can add text to the drawable itself then convert to a bitmap? I looked into creating a TextView with a drawable as a background.
Is this the best way to do it? I sort of want to avoid creating TextViews in my code. Any advice is appreciated.
Edit 2/21/2013:
In response to JustDanyul's post I have the following code:
int width = 40;
int height = 40;
Bitmap.Config config = Bitmap.Config.ARGB_8888;
bitmap = Bitmap.createBitmap(width, height, config);
Canvas canvas = new Canvas(bitmap);
Resources res = context.getResources();
Drawable shape = res.getDrawable(R.drawable.miss_scarlet);
shape.draw(canvas);
Paint paint = new Paint();
paint.setTextSize(fontSize);
paint.setColor(Color.BLACK);
canvas.drawText(gameToken.getDbName(), 5, 5, paint);
My drawable is not showing up when I draw the bitmap on another canvas. The drawable itself is fine (I tested it as a background to a TextView). The text shows up. Am i missing something in this code?
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="4dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="3dp"
android:color="#000000" />
</shape>
Edit #2 2/21/2013:
I added:
shape.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
to my code and now the drawable appears but my text is gone (or just hidden).

I would suggest you to try something like this, first, create an empty bitmap:
int w = 500
int h = 500; // or whatever sizes you need
Bitmap.Config config = Bitmap.Config.ARGB_8888;
Bitmap bitmap = Bitmap.createBitmap(w, h, config);
Next step, create a new canvas instance, which renders onto your newly created bitmap
Canvas canvas = new Canvas(bitmap);
Now, you can draw the ShapeDrawable onto your empty bitmap using the ShapeDrawable's draw method
myshapedrawable.draw(canvas);
Finally, you can use the drawText method of the canvas instance to draw your text on the canvas.

Drawing a Drawable to a Bitmap

I have an XML drawable file with a stroke, and I also have several bitmaps which I want to apply the stroke to. I tried calling Drawable.draw(canvas), but it throws IllegalStateException
stroke XML:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="3dp"
android:color="#ffffffff"/>
</shape>
Drawing code:
Drawable strokeDrawable = getResources().getDrawable(R.drawable.stroke);
Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.bmp1);
Canvas canvas = new Canvas(bmp1);
strokeDrawable.draw(canvas);
How should I do this?

Solution:
final int STROKE_WIDTH = 3;
Bitmap copy = Bitmap.createBitmap(bmp1.getWidth() + STROKE_WIDTH * 2, bmp1.getHeight() + STROKE_WIDTH * 2, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(copy);
strokeDrawable.setBounds(0, 0, copy.getWidth(), copy.getHeight());
strokeDrawable.draw(canvas);
canvas.drawBitmap(bmp1, STROKE_WIDTH, STROKE_WIDTH, null);
bmp1.recycle();
bmp1 = copy;

Trying to draw a button: how to set a stroke color and how to "align" a gradient to the bottom without knowing the height?

I am creating a button programmatically. It is rounded and has a gradient background, and works fine and looks nice, but I couldn't do two things I wanted:
Set a 1 pixel stroke with a given color. I tried getPaint().setStroke(), but couldn't figure how to set the stroke color. How should I do it?
Align the gradient to the bottom of the button, no matter what height it has. Is this possible?
For reference, this is the code I'm using:
Button btn = new Button(context);
btn.setPadding(7, 3, 7, 5);
btn.setTextColor(text_color);
// Create a gradient for the button. Height is hardcoded to 30 (I don't know the height beforehand).
// I wish I could set the gradient aligned to the bottom of the button.
final Shader shader = new LinearGradient(0, 0, 0, 30,
new int[] { color_1, color_2 },
null, Shader.TileMode.MIRROR);
float[] roundedCorner = new float[] { 5, 5, 5, 5, 5, 5, 5, 5 }
ShapeDrawable normal = new ShapeDrawable(new RoundRectShape(roundedCorner, null, null));
normal.getPaint().setShader(shader);
normal.setPadding(7, 3, 7, 5);
// Create a state list (I suppressed settings for pressed).
StateListDrawable state_list = new StateListDrawable();
state_list.addState(new int[] { }, normal);
btn.setBackgroundDrawable(state_list);

In terms of your first question, I struggled with this as well, and it doesn't look like there are any suitable methods within Drawables themselves (I was using ShapeDrawable) or the Paint class. However, I was able to extend ShapeDrawable and override the draw method, as below, to give the same result:
public class CustomBorderDrawable extends ShapeDrawable {
private Paint fillpaint, strokepaint;
private static final int WIDTH = 3;
public CustomBorderDrawable(Shape s) {
super(s);
fillpaint = this.getPaint();
strokepaint = new Paint(fillpaint);
strokepaint.setStyle(Paint.Style.STROKE);
strokepaint.setStrokeWidth(WIDTH);
strokepaint.setARGB(255, 0, 0, 0);
}
#Override
protected void onDraw(Shape shape, Canvas canvas, Paint fillpaint) {
shape.draw(canvas, fillpaint);
shape.draw(canvas, strokepaint);
}
public void setFillColour(int c){
fillpaint.setColor(c);
}
}

You can use a GradientDrawable with setStroke(3, Color.WHITE) method. To make rounded corners, use this:
setShape(GradientDrawable.RECTANGLE);
setCornerRadii(new float[]{2,2,2,2,2,2,2,2});

Try this....in drawable make a new xml file and set it where you want it..!
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#e1e1e1" />
<stroke
android:width="2dp"
android:color="#808080" />
<corners android:radius="10dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>