Android oval shape 2 colors

Question

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.

use a `LayerDrawable` with two layers: one is normal blue oval shape and the second is a green oval shape wrapped around the `ClipDrawable`, but honestly why to make it so complex when you can create a custom `Drawable` class where you can draw whatever you want? — pskink, Apr 28 '16 at 17:59
Hi there @pskink can you give me an example customer drawable class — Ranveer Bedaysee, Apr 28 '16 at 18:01
either create `class MyDrawable extends Drawable {...` or use `ShapeDrawable` with a custom `Shape` like this: `class MyShape extends Shape {...` — pskink, Apr 28 '16 at 18:02

Audo · Answer 1 · 2017-02-23T17:59:27.910

8

<?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>

edited Feb 23 '17 at 17:59

answered Feb 19 '17 at 23:44

Audo

93
2
5

When giving an answer it is preferable to give [some explanation as to WHY your answer](http://stackoverflow.com/help/how-to-answer) is the one. – Stephen Rauch Feb 20 '17 at 00:06
1

Audo Its works, however what I have to do if I want colors to be divided vertically (LEFT/RIGHT) rather than horizontally? – murt Jul 03 '17 at 11:52
You can just rotate your view after setting this as background, just add this in xml: android:rotation="90" – anro Mar 12 '19 at 06:57

score 3 · Answer 2 · answered Apr 29 '16 at 06:37

3

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>

answered Apr 29 '16 at 06:37

Damini Mehra

3,257
3
13
24

and add this shape.xml into your view background – Damini Mehra Apr 29 '16 at 06:42
Nice answer,it will look exactly as mentioned in above image by replacing android:shape="oval" line with android:shape="ring". So final xml will look like :- Overall your answer is just awesome. @Damini – Adarsh Yadav Apr 29 '16 at 06:52

score 1 · Answer 3 · answered Dec 30 '16 at 19:18

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;
    }
}

Android oval shape 2 colors

3 Answers3