Search code examples
androidandroid-layoutandroid-resourcesandroid-shape

Triangle Shape - How does it work?


I found several answers to How to draw a triangle shape in Android in the resources files. But I don't found any to explain how I can change the triangle rotation.

Example that I found:

<?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="-40%"
        android:pivotY="87%" >
        <shape
            android:shape="rectangle" >
            <stroke 
                android:color="@color/color_app_transparent" 
                android:width="10dp" />
            <solid
                android:color="@color/color_app_primary" />
        </shape>
    </rotate>
</item>
</layer-list>

Somebody can explain how can I change the Triangle Shape to do a arrow like this:

enter image description here


Solution

  • I manage to draw that arrow, here is the code:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:id="@+id/triangle_shape">
            <rotate
                android:fromDegrees="45"
                android:toDegrees="45"
                android:pivotX="0%"
                android:pivotY="140%" >
                <shape
                    android:shape="rectangle" >
                    <stroke 
                        android:color="@color/color_app_transparent" 
                        android:width="2dp" />
                    <size android:width="50dp" android:height="50dp"/>
                    <solid
                        android:color="@color/color_app_primary" />
                </shape>
            </rotate>
        </item>
    </layer-list>
    

    For what I understand, I had to rotate the square 45º and then I tried to adjust the X and Y points to manage to hide most of the square and show only one edge and this way I made the arrow.

    The shape after rotating 45º:

    enter image description here

    And then the final result after changing the points X and Y:

    enter image description here

    I used a ImageView to display my arrow with width and height as wrap_content.