How to create parallelogram shape background?

fazilpuriasa picture fazilpuriasa · Mar 17, 2015 · Viewed 13.1k times · Source

I am trying to make parallelogram background for my textview but it is not displaying properly...it display following output

enter image description here

<layer-list  >
    <item>
        <rotate
            android:fromDegrees="10"
            android:toDegrees="10"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="#000000" android:width="10dp"/>

            </shape>

        </rotate>

    </item>
</layer-list>

i need output like this........

enter image description here

Answer

Onik picture Onik · Mar 25, 2015

As alternative to @mmlooloo's answer, whom a credit goes to, I suggest a xml-drawable solution (since you haven't emphasized exactly what kind of solution you're looking for). In the example below I used a general View, however you can use any other.

Here is the View

<View
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:background="@drawable/shape" />

and shape.xml itself

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#13a89e" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<item
    android:right="100dp"
    android:left="-100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:right="-100dp"
    android:left="100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

</layer-list>

Here is how it looks like:

enter image description here