How to make a drawable rectangle with two colors in xml in android?

Question

I want to make something like this by using xml in android. I achieved something like it using gradient with angle 45 degree but I don't want gradient but plain color like this. Any suggestion is greatly appreciated. Thanks in Advance.

This is what I want to make using xml.

I need many like this so I can not load bitmaps in drawable folder.]1

Answer 1

You can draw two triangles of the required colors using the Android PathShape class

Answer 2

The below answer is shamelessly copied from here How to make gradient background in android

Try with this :

<gradient
    android:angle="90"   //you need to change angle as per your needs (270 might work in your case)
    android:centerColor="#555994"  //try playing with colors of start, center and End colors to get desired result. also try removing some.
    android:endColor="#b5b6d2"
    android:startColor="#555994"
    android:type="linear" />

<corners 
    android:radius="0dp"/>

To use above code you need to make a drawable .xml file, copy & paste the above code into this file.

Thanks.

Answer 3

I do not know if it is possible in XML. In Java, one possible way is to create a Shape and build a ShapeDrawable with it.

TwoTrianglesDrawable.java

public class TwoTrianglesDrawable extends ShapeDrawable {

    public TwoTrianglesDrawable(){
        super();
        setShape(new TwoTrianglesShape());
    }

    private class TwoTrianglesShape extends Shape {

        @Override
        public void draw(Canvas canvas, Paint paint) {

            Path path = new Path();
            path.setFillType(Path.FillType.INVERSE_EVEN_ODD);
            Path path1 = new Path();
            path1.setFillType(Path.FillType.INVERSE_EVEN_ODD);

            paint.setStrokeWidth(0);
            paint.setStyle(Paint.Style.FILL);
            paint.setAntiAlias(true);

            paint.setColor(Color.YELLOW);

            Point a = new Point(0, 0);
            Point b = new Point(0, (int) getHeight());
            Point c = new Point((int)getWidth(), (int)getHeight());

            path.moveTo(a.x, a.y);
            path.lineTo(b.x, b.y);
            path.lineTo(c.x, c.y);
            path.close();
            canvas.drawPath(path, paint);

            paint.setColor(Color.BLUE);

            Point a1 = new Point(0, 0);
            Point b1 = new Point((int)getWidth(),0);
            Point c1 = new Point((int)getWidth(), (int)getHeight());

            path1.moveTo(a1.x, a1.y);
            path1.lineTo(b1.x, b1.y);
            path1.lineTo(c1.x, c1.y);
            path1.close();
            canvas.drawPath(path1, paint);

        }
    }
}

Using, for example, as a RelativeLayout background:

RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout);

ShapeDrawable background = new TwoTrianglesDrawable();
layout.setBackground(background);//Requires API 16 or higher.

Answer 4

This will give you two colors half and half vertically. Put this code in a drawable resource.

<item
    android:top="320dip">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <solid android:color="@color/red" />
    </shape>
</item>
<item android:bottom="320dip">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <solid android:color="@color/yellow" />
    </shape>
</item>