1

I have been following the answer for this question Making a triangle shape using xml definitions?.

I need to create a triangle that looks like arrow to be placed at the end of selected list item (see attached photos).

ArrowWithTriangle

I have managed to get it working by do the following:

shape_diamond.xml
-----------------

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate android:fromDegrees="45" android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke android:color="@color/color_transparent" android:width="10dp"/>
                <solid android:color="@color/color_gray" />
            </shape>
        </rotate>
    </item>
</layer-list>

And create a new selector

selector_list_item.xml
----------------------

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true">
        <layer-list>
            <item android:drawable="@color/color_orange" />
            <item android:width="28dp"
                  android:height="28dp"
                  android:right="-14dp"
                  android:gravity="center|right"
                  android:drawable="@drawable/shape_diamond" />
        </layer-list>
    </item>
    <item android:state_selected="true">
        <layer-list>
            <item android:drawable="@color/color_orange" />
            <item android:width="28dp"
                  android:height="28dp"
                  android:right="-14dp"
                  android:gravity="center|right"
                  android:drawable="@drawable/shape_diamond" />
        </layer-list>
    </item>
    <item android:state_focused="true">
        <layer-list>
            <item android:drawable="@color/color_orange" />
            <item android:width="28dp"
                  android:height="28dp"
                  android:right="-14dp"
                  android:gravity="center|right"
                  android:drawable="@drawable/shape_diamond" />
        </layer-list>
    </item>
    <item android:drawable="@color/color_transparent" />
</selector>

Everything works well for API 23+ because it supports "WIDTH" attribute. But it doesn't work in API below 23.

Does anyone know how to make it work for API that is below API 23 which does not support the "WIDTH" attribute?

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
Sam
  • 1,826
  • 26
  • 58
  • 2
    do not use such xml tricks, use 9 patch drawable instead – pskink Jan 16 '18 at 07:14
  • Or you can use a custom view that draw what you want to draw. – Kevin Robatel Jan 16 '18 at 07:20
  • 1
    @KevinRobatel in that case use a custom `Drawable` (or custom `android.graphics.drawable.shapes.Shape`), not custom `View` – pskink Jan 16 '18 at 07:25
  • @pskink, I am new to Android, I am not sure what is 9 patch drawable. I am using xml because I can connect the color to match whatever background color that I used via theme `@color/color_gray`. Well, `@color/color_gray` is just an example as I am using more meaningful name. I am interested on the custom view / custom drawable. Can this custom drawable be used to create the triangle with whatever background color (eg. `@color/color_gray`)? Thank you :) – Sam Jan 16 '18 at 08:20
  • see https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch and https://developer.android.com/studio/write/draw9patch.html – pskink Jan 16 '18 at 08:38
  • @pskink I looked into 9patch. It is really COOL!!!! But I still confuse on how to apply on my selector. See, the problem is that with the "Width" attribute which is not supported for API < 23. 9 patch will have the exact problem because it will grow as much as it required. In my solution, I can limit it using `ImageView`, but then I do not know how to show this `ImageView` when the list is selected and hide it when it is not selected. – Sam Jan 16 '18 at 11:52
  • something like [that](https://pasteboard.co/H3bK1ZH.png) – pskink Jan 16 '18 at 12:31
  • @pskink should I save it as .9.png file? – Sam Jan 17 '18 at 08:21
  • yes, it is a nine patch png file – pskink Jan 17 '18 at 08:26
  • Hi @pskink, do you put this file in drawable folder? I tried to reference it using `android:drawable="@drawable/test.9.png"` in `selector_list_item.xml`, but it can't compile. It gives me this error `Error:error: resource drawable/test.9.png (aka com.warehouse.waredriver:drawable/test.9.png) not found.` But I don't think it will solve my problem. I need to control the width and height and place this diamond shape to the end of the list. – Sam Jan 17 '18 at 16:20
  • remove `.9.png` – pskink Jan 17 '18 at 16:38

0 Answers0