1

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

ligi
  • 39,001
  • 44
  • 144
  • 244
jobernas
  • 686
  • 1
  • 12
  • 24

1 Answers1

1

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.

jobernas
  • 686
  • 1
  • 12
  • 24