Custom arrows without image: Android

Question

I followed this tutorial: http://looksok.wordpress.com/2013/08/24/android-triangle-arrow-defined-as-an-xml-shape/

The tutorial is for creating custom arrows as increment/decrement buttons without having to use images. The shape of the arrows are fine however the up arrow is positioned with its base at the bottom of the button view and the down arrow is positioned with is base at the top of the button view. In otherwords, the arrows are not aligned properly.

I was wondering, is there some sort of y-axis offset for button views that can be used to position the arrows better? The code I have is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/arrow_up"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="@drawable/custom_arrow" />

    <Button
        android:id="@+id/arrow_down"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:rotation="180"
        android:layout_toRightOf="@id/arrow_up"
        android:background="@drawable/custom_arrow" /> 
</RelativeLayout>

The custon_arrow.xml is:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <!-- android:pivotX="-40%" -->
        <rotate 
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-20%"
            android:pivotY="88%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="@color/transparent" android:width="5dp"/> 
                <solid
                    android:color="@color/grey_shade" />
            </shape>
        </rotate>
    </item>
</layer-list>

Answer 1

  <?xml version="1.0" encoding="utf-8"?>
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="12dp"
            android:height="10dp"
            android:viewportWidth="32.0"
            android:viewportHeight="24.0">
            <path android:fillColor="#707070"
                android:pathData="M0 0 h32 l-16 24 Z"/>
        </vector>

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="12dp"
    android:width="10dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#707070"
            android:pathData="m 50,0 l 50,70 -100,0 z" />
    </group>
</vector>  

Answer 2

Can be done easily using paths:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="32dp"
        android:height="24dp"
        android:viewportWidth="32.0"
        android:viewportHeight="24.0">
    <path android:fillColor="#e4e4e8"
          android:pathData="M0 0 h32 l-16 24 Z"/>
</vector>

Answer 3

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▲"/>

or

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

You can get here more options.

Answer 4

Make your marginLeft attributes consistent (one is 3dp the other one is 5dp).

SO! (after seeing the picture) you were talking about vertical alignment!

I think you can easily add some paddingBottom to the up arrow and paddingTop to the down arrow.

OK, it's a cheap and dirty trick, but...

... this answer is surely better: look