Android make oval background drawable with chat corner

Question

I know how to create oval background, I add this drawable to a RelativeLayout background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
</shape>

But I want to create this drawable and the corner of a chat like this:

How can I add to this drawable the corner of the chat?

Pseudaxis

You probably have to use a 9-patch image for this – Kayleen

I don´t know what is 9-patch, but I need that layout scale with text lines. – Pseudaxis

@Pseudaxis I have posted a solution. Let me know if that does not work – Rowland

Answer 1

Create your bubble layout like this

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="Hello"
        android:padding="16dp"
        android:background="@drawable/rounded_rect"/>

    <ImageView
        android:layout_marginTop="-1.5dp"
        android:layout_width="8dp"
        android:layout_height="16dp"
        android:layout_gravity="start"
        android:background="@drawable/corner"
        />

</LinearLayout>

Drawable files

rounded_rect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#888" />
    <corners
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>

</shape>

corner.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45"
            >
            <shape android:shape="rectangle">
                <solid android:color="#888"/>

            </shape>
        </rotate>
    </item>
</layer-list>

This layout will scale with the text you add to the TextView

EDIT

I just now noticed that the arrow in your requirement should be pointing to the left. To get that make some small changes to your bubble layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:layout_gravity="bottom"
        android:background="@drawable/corner2"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:padding="16dp"
        android:background="@drawable/rounded_rect"/>

</LinearLayout>

corner2.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45"
            >
            <shape android:shape="rectangle">
                <solid android:color="#888"/>

            </shape>
        </rotate>
    </item>
</layer-list>

OUTPUT

Rowland

Which one did you try? the one using corner1.xml or corner.xml – Rowland

@Pseudaxis Are you sure you used the drawable file exactly as I did? It should work. – Rowland

Answer 2

You would have to make a drawable of the complete Chat Bubble, including corners. Then make it a 9-patch so the drawable will expand horizontally and vertically without deforming.

Sham

Answer 3

For anyone wondering for the other corner of chat.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <rotate
            android:fromDegrees="-45"
            android:pivotX="120%"
            android:pivotY="90%"

    >
    <shape android:shape="rectangle">
        <solid android:color="@color/button_login"/>

    </shape>
</rotate>

Mechelle