Android 通过 shape 实现三角形气泡效果

需要实现 UI 给出的下面两种图中带三角形气泡的效果：

如果使用 .9 图，一方面会增加安装包体积，另一方面，拉伸后可能变形。将气泡分解可知，气泡由 正/倒三角形 和 圆角长方形 组成，于是可以通过组合来形成三角形气泡的效果。

参考 这篇博文 绘制三角形。

正三角形的 triangle_up.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 正三角 -->  
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="-40%"
            android:pivotY="80%">
            <shape android:shape="rectangle">
                <size
                    android:width="16dp"
                    android:height="16dp" />
                <solid android:color="#7d72ff" />
            </shape>
        </rotate>
    </item>
</layer-list>

倒三角形的 triangle_down.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 倒三角 -->  
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%">
            <shape android:shape="rectangle">
                <size
                    android:width="16dp"
                    android:height="16dp" />
                <solid android:color="#7d72ff" />
            </shape>
        </rotate>
    </item>
</layer-list>

第一幅图的 xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <ImageView
        android:id="@+id/iv_triangle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/triangle_up" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="42dp"
        android:layout_below="@+id/iv_triangle"
        android:layout_centerHorizontal="true"
        android:background="@drawable/bg_rectangle_corner"
        android:gravity="center"
        android:text="全新上线啦"
        android:textColor="#ffffff"
        android:textSize="15sp" />

</RelativeLayout>

drawable 中的 bg_rectangle_corner.xml 很简单：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#7d72ff" />
    <corners android:radius="6dp" />
</shape>

第二幅图的 xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <!-- Lottie动画可以忽略 -->  
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="57dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="record_guide.json"
        app:lottie_loop="true"/>

    <ImageView
        android:id="@+id/iv_record_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="50dp"
        android:paddingBottom="17dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:src="@drawable/recommend_record_btn"/>

    <TextView
        android:id="@+id/tv_record"
        android:layout_width="190dp"
        android:layout_height="40dp"
        android:layout_above="@+id/iv_record_icon"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/bg_rectangle_corner"
        android:gravity="center"
        android:text="点击录制！展示真实的你"
        android:textColor="#ffffff"
        android:textSize="15sp"
        tools:visibility="visible"/>

    <ImageView
        android:id="@+id/iv_triangle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/tv_record"
        android:layout_marginEnd="42dp"
        android:layout_marginTop="40dp"
        android:src="@drawable/triangle_down"/>

</RelativeLayout>

如此便绘制完三角形气泡。