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.

enter image description here

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>

score 16 · Accepted Answer · answered Mar 16 '15 at 10:48

16

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

answered Mar 16 '15 at 10:48

Elhanan Mishraky

2,736
24
26

I am only just now seeing this, but this is brilliant! Very nice answer – portfoliobuilder Jan 11 '16 at 21:15
You're the MVP! – Allinone51 Dec 05 '16 at 13:45

score 14 · Answer 2 · answered May 16 '16 at 13:15

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>

score 2 · Answer 3 · edited May 23 '17 at 12:09

2

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

edited May 23 '17 at 12:09

Community

1
1

answered Dec 27 '13 at 18:50

Phantômaxx

37,901
21
84
115

Well the marginLeft attribute is positioning left to right. It does not affect the shape inside of the button view. I want to know how to affect the button. Let me take a screenshot, maybe that will be better. – portfoliobuilder Dec 27 '13 at 19:03
This is also what I originally thought, but it has no affect on the arrow shape. And ignore the margin attributes, I just quickly copied and pasted. The margins are relevant, just not in the context I have presented them here. There is a lot more code in my actual program. Sorry for the confusion. But the margins also have no bearing on the shape positioning. I tried adding paddingTop and paddingBottom with 20dp, 10dp, and then 70dp just to see if the arrow would disappear out of the view. None of this had affect. Any other ideas? – portfoliobuilder Dec 27 '13 at 19:22

score 1 · Answer 4 · answered Aug 14 '20 at 12:09

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

Custom arrows without image: Android

4 Answers4

Linked