CODEWITHSUNDEEP
androidandroid-drawableandroid-shape
Ranveer Bedaysee
Ranveer Bedaysee

Reputation: 141

Android oval shape 2 colors

I have a linear layout view whose background I have set to oval shape solid color. So far I have the background as circle. Now I want to achieve same i.e using shape drawable to get a circle with 2 colors. Please see attached.

enter image description here

Upvotes: 4

Views: 3317

Answers (3)

Audo
Audo

Reputation: 103

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <gradient
        android:centerX="-1"
        android:type="sweep"
        android:startColor="color1"
        android:endColor="color2"
        />

</shape>

Upvotes: 9

kaarlo
kaarlo

Reputation: 311

This might come late, but I had trouble finding good answer so hear my take.

I used a custom drawable to draw the circle and with it a LinearGradient shader which is configured by positions array to have no gradient transition. The gradient line direction is configured in LinearGradient constructor (here it is diagonal).

public class MultiColorCircleDrawable extends Drawable {

    private Paint paint;
    private int[] colors;

    public MultiColorOvalDrawable(int[] colors) {
        this.colors = colors;
    }

    private void init() {
        paint = new Paint();
        paint.setShader(createShader());
    }

    private Shader createShader() {
        int[] colorsArray = new int[colors.length * 2];
        float[] positions = new float[colors.length * 2];

        for (int i = 0; i < colors.length; i++) {
            int y = i * 2;
            int color = colors[i];
            colorsArray[y] = color;
            colorsArray[y+1] = color;
            positions[y] = 1f / colors.length * i;
            positions[y+1] = 1f / colors.length * (i+1);
        }

        Rect bounds = getBounds();
        int width = bounds.right - bounds.left;
        int height = bounds.bottom - bounds.top;

        return new LinearGradient(0, 0, width, height, colorsArray, positions, Shader.TileMode.REPEAT);
    }

    @Override
    public void draw(Canvas canvas) {
        if (null == paint) {
            init();
        }

        Rect bounds = getBounds();
        int width = bounds.right - bounds.left;
        int height = bounds.bottom - bounds.top;
        canvas.drawCircle(width/2, height/2, (width/2) - strokeWidth, maskPaint);
    }

    @Override
    public void setAlpha(int i) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.OPAQUE;
    }
}

Upvotes: 1

Damini Mehra
Damini Mehra

Reputation: 3347

create shape.xml in your drawable folder shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient android:startColor="#0000FF" android:endColor="#00FF00"
android:angle="270"/>
</shape>

Upvotes: 3

Related Questions