Custom arrows without image: Android

问题:

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>

回答1:

<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.

回答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>

回答3:

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