Shape layer-list composition

Question

My goal is to have a drawable (shape) with this result:

What i tried so far:

triangle.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="87%"
            android:pivotY="140%"
            >
            <shape
                android:shape="rectangle">
                <size
                    android:height="24dp"
                    android:width="24dp"
                    />
                <solid
                    android:color="@color/green" />
                <corners android:radius="1dp" />
            </shape>
        </rotate>
    </item>
</layer-list>

result_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/triangle" />

    <item
        android:left="24dp"
        >
        <shape
            android:shape="rectangle">

            <size
                android:height="24dp"
                android:width="40dp"
                />
            <solid
                android:color="@color/c_white" />

            <corners android:radius="1dp" />
        </shape>
    </item> 
</layer-list>

As result im getting the rectangle not aligned with the triangle and the triangle is now a rectangle with some rotation.

How can I represent this image as drawable using shapes and layer-list ?

score 1 · Accepted Answer · answered Oct 30 '17 at 20:45

You can try using vector to achieve what you want:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="50dp"
    android:viewportHeight="50"
    android:viewportWidth="150">
    <path
        android:fillColor="#ff008800"
        android:pathData="M0,25 50,50 50,0z" />
    <path
        android:fillColor="#ffbb0000"
        android:pathData="M50,0 50,50 150,50 150,0z" />
</vector>

Here is the result using it as background for a TextView:

Shape layer-list composition

1 Answers1