Custom Shape while chatting in android using xml file

Question

I am able to draw custom back ground to xml file using Shape

But how to add arc or curv at specified place.

Answer 1

In my library Facebook Like Button I implemented custom Path in order to achieve this goal.

There is ability to specify location of marker wherever you want:

Code from source:

import android.graphics.Path;
import android.graphics.RectF;

public class CalloutPath extends Path {
    public static final int MARKER_NONE = 0x0;
    public static final int MARKER_LEFT = 0x1;
    public static final int MARKER_TOP = 0x2;
    public static final int MARKER_RIGHT = 0x4;
    public static final int MARKER_BOTTOM = 0x8;
    public static final int MARKER_ALL = 0xf;

    private final RectF oval = new RectF();

    /**
    * @param m marker
    * @param w width
    * @param h height
    * @param s stroke thickness
    * @param r corners radius
    */
    public void build(int m, float w, float h, float s, float r) {
        int fl = factor(m, MARKER_LEFT);
        int ft = factor(m, MARKER_TOP);
        int fr = factor(m, MARKER_RIGHT);
        int fb = factor(m, MARKER_BOTTOM);

        float x0 = s + 0f;
        float x1 = s + r * fl;
        float x2 = s + r + r * fl;
        float x3 = w / 2f - r;
        float x4 = w / 2f;
        float x5 = w / 2f + r;
        float x6 = w - 1f - s - r - r * fr;
        float x7 = w - 1f - s - r * fr;
        float x8 = w - 1f - s;
        float y0 = s + 0f;
        float y1 = s + r * ft;
        float y2 = s + r + r * ft;
        float y3 = h / 2f - r;
        float y4 = h / 2f;
        float y5 = h / 2f + r;
        float y6 = h - 1f - s - r - r * fb;
        float y7 = h - 1f - s - r * fb;
        float y8 = h - 1f - s;

        reset();

        moveTo(x1, y2);

        oval.set(x2 - r, y2 - r, x2 + r, y2 + r);
        arcTo(oval, 180f, 90f);

        if (ft != 0) {
            lineTo(x3, y1);
            lineTo(x4, y0);
            lineTo(x5, y1);
        }

        lineTo(x6, y1);

        oval.set(x6 - r, y2 - r, x6 + r, y2 + r);
        arcTo(oval, 270f, 90f);

        if (fr != 0) {
            lineTo(x7, y3);
            lineTo(x8, y4);
            lineTo(x7, y5);
        }

        lineTo(x7, y6);

        oval.set(x6 - r, y6 - r, x6 + r, y6 + r);
        arcTo(oval, 0f, 90f);

        if (fb != 0) {
            lineTo(x5, y7);
            lineTo(x4, y8);
            lineTo(x3, y7);
        }

        lineTo(x2, y7);

        oval.set(x2 - r, y6 - r, x2 + r, y6 + r);
        arcTo(oval, 90f, 90f);

        if (fl != 0) {
            lineTo(x1, y5);
            lineTo(x0, y4);
            lineTo(x1, y3);
        }

        close();
    }

    public static int factor(int marker, int mask) {
        return (marker & mask) != 0 ? 1 : 0;
    }
}

Answer 2

Because you have this arc or curv you should create a custom jpg.

But you can use with corners and have below :

Answer 3

You do not need to do it programmatically, you should just use a nine patch image resource that make a perfect image for you. If you want to know more about nine patch and how it works, have a look at this and this links.
As you can see this image makes a perfect chat bubble for you. I already decompiled Whatsapp , Viber and they all using a nine patched image to make a chat bubble. As you can see, the Telegram app also using a nine patched image to achieve this.

My sample chat bubble image:

I also should mention that you don't need any custom path. It is a typical patched image without any customization.

Answer 4

make 9patch image like this so that if in conversation lots of text then also it can be adjusted itself and also not stretch or compressed from curve .

Hope it will help you