Android使带有聊天角的椭圆形背景可绘制 [英] Android make oval background drawable with chat corner

问题描述

我知道如何创建椭圆形背景，我将此可绘制对象添加到RelativeLayout背景中:

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?

推荐答案

像这样创建气泡布局

<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

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

编辑

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

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>

输出

这篇关于Android使带有聊天角的椭圆形背景可绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！