Android 使聊天角可绘制椭圆形背景

Question

我知道如何创建椭圆形背景，我将这个可绘制对象添加到 RelativeLayout 背景：

<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>

但我想像这样创建这个可绘制对象和聊天角：

如何将聊天角添加到此可绘制对象中？

Answer 1

您必须绘制完整的聊天气泡，包括角。然后将其设为 9-patch 这样 drawable 将水平和垂直扩展而不会变形。

Answer 2

像这样创建气泡布局

<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>

可绘制文件

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>

此布局将随着您添加到 TextView

中的文本缩放

编辑

我刚刚注意到您要求中的箭头应该指向左侧。为此，请对气泡布局进行一些小改动

<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>

输出

Answer 3

对于想知道聊天的另一个角落的人。

<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>

Android 使聊天角可绘制椭圆形背景

Android make oval background drawable with chat corner

android

android-layout

android-drawable