It is possible to create this simple shape in Android XML?

Question

I am trying to create the following simple shape in Android XML:

Simple Shape

Just a rectangle combined with a triangle to form an arrow. The shape should be used as navigation button background.

On Windows Phone it would be no problem to create this shape in XAML but the XML drawing capabilities of Android seem to be much more limited.

I tried to create a layer-list drawable using a normal rectangle as "body" and rotated rectangle as triangle. Creating a triangle by rotating a rectangle works fine as long as the triangle is aligned with the border. As soon as I try to move/translate the triangle to the left (to the end of the body/box), the triangle is not triangle any more but of course just a rotated rectangle... Is there any way to clip off the one half of the rotated rectangle and move it to the end of the box in XML?

Of course this can be done in Code/Java, but I would like to know if it also possible XML.

I would need this kind of button in many different sizes and using a XML drawable would be much better (from my point of view) than using dozens of PNGs.

did u try with layerlist that have one rectangle and one square rotated(right side of rectangle).? — Waqar Ahmed, Jun 10 '14 at 12:57
By xml you cant make it, use image or button for same and set this as a background image to button Or set src to imageview. — Robi Kumar Tomar, Jun 10 '14 at 12:58
no, you can't do that, use a ShapeDrawable with a custom Shape instead — pskink, Jun 10 '14 at 12:59
That this can be done in Jave or by using a nine-patch image is out of question. I just wanted to check if there is a pure XML solution. — Andrei Herford, Jun 10 '14 at 13:15
@pskink: I tried to us in the layer-list approach but it did not work. Could you be a little more specific which solution you see? — Andrei Herford, Jun 10 '14 at 13:20

score 3 · Accepted Answer · answered Jun 10 '14 at 13:27

3

try this custom Shape:

Shape shape = new Shape() {
    Path path = new Path();
    @Override
    protected void onResize(float width, float height) {
        path.reset();
        path.lineTo(width - height / 2, 0);
        path.lineTo(width, height / 2);
        path.lineTo(width - height / 2, height);
        path.lineTo(0, height);
        path.close();
    }
    @Override
    public void draw(Canvas canvas, Paint paint) {
        canvas.drawPath(path, paint);
    }
};
ShapeDrawable d = new ShapeDrawable(shape);
d.getPaint().setColor(0xff6699bb);

someView.setBackgroundDrawable(d);

answered Jun 10 '14 at 13:27

pskink

23,874
6
66
77

Thank you for the example, but as said before I was searching for a solution that uses XML only... – Andrei Herford Jun 10 '14 at 13:33
1

as i said you can't do that in xml, why it has to be xml? any reason? – pskink Jun 10 '14 at 13:40
I just worked on a Windows Phone app and creating such things in XAML is very easy and straight forward. I just wanted to know if this is possible in Android XML as well. Of course it can be done in Code but this quite cumbersome I think. – Andrei Herford Jun 10 '14 at 13:49
using xml gives you a very limited subset of things you can do, in java sky is your limit, why do you think its cumbersome? – pskink Jun 10 '14 at 14:03
@AndreiHerford if you really need more xml stuff see my PathDrawable https://github.com/pskink/PathDrawable – pskink Jun 10 '14 at 14:49

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

I can't comment so will answer.. I like the layerlist idea. example here:

Android custom shape

and triange example here: http://looksok.wordpress.com/2013/08/24/android-triangle-arrow-defined-as-an-xml-shape/

combining those answers may work.

edited May 23 '17 at 11:44

Community

1
1

answered Jun 10 '14 at 13:13

Martin

125
1
11

While this link may provide an answer, you better provide some excerpts from that page, since its contents may be no more available in the future. – Phantômaxx Jun 10 '14 at 13:22

It is possible to create this simple shape in Android XML?

2 Answers2