androidshapedrawable

How to create parallelogram shape background?


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


Solution

  • 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