问题
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?
回答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
回答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.
回答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>
来源:https://stackoverflow.com/questions/45883114/android-make-oval-background-drawable-with-chat-corner