Google官方控件ShapeableImageView使用

上面都是用ShapeableImageView写出来的效果

直接上代码：

布局文件：

"1.0" encoding="utf-8"?>
"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"
    tools:context=".MainActivity">
 
 
    
        android:id="@+id/image0"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    
        android:id="@+id/image1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@id/image0"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearance="@style/RoundedStyle1" />
 
    
        android:id="@+id/image2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@id/image1"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearance="@style/RoundedStyle2" />
 
    
        android:id="@+id/image3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image0"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle2"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
    
        android:id="@+id/image4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="@id/image5"
        app:layout_constraintStart_toEndOf="@id/image3"
        app:layout_constraintTop_toBottomOf="@id/image1"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle3"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
    
        android:id="@+id/image5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image4"
        app:layout_constraintTop_toBottomOf="@id/image1"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle4"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
 
    
        android:id="@+id/image6"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image3"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle5"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
    
        android:id="@+id/image7"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="@id/image8"
        app:layout_constraintStart_toEndOf="@id/image6"
        app:layout_constraintTop_toBottomOf="@id/image3"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle6" />
 
    
        android:id="@+id/image8"
        android:layout_width="180dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:scaleType="fitXY"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image7"
        app:layout_constraintTop_toBottomOf="@id/image3"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle4"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
    
        android:id="@+id/image9"
        android:layout_width="180dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:scaleType="fitXY"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image6"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle5"
        app:strokeColor="#00ff00"
        app:strokeWidth="4dp" />
 
    
        android:id="@+id/image10"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image11"
        app:layout_constraintStart_toEndOf="@id/image9"
        app:layout_constraintTop_toBottomOf="@id/image6"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle7" />
 
    
        android:id="@+id/image11"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:padding="2dp"
        android:scaleType="fitXY"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image10"
        app:layout_constraintTop_toBottomOf="@id/image6"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle8" />
 
    
        android:id="@+id/image12"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image13"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image10"
        app:layout_constraintVertical_chainStyle="spread"
        app:shapeAppearance="@style/RoundedStyle9" />
 
    
        android:id="@+id/image13"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toStartOf="@id/image14"
        app:layout_constraintStart_toEndOf="@id/image12"
        app:layout_constraintTop_toBottomOf="@id/image10"
        app:layout_constraintVertical_chainStyle="spread" />
 
    
        android:id="@+id/image14"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY"
        android:src="@mipmap/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image13"
        app:layout_constraintTop_toBottomOf="@id/image10"
        app:layout_constraintVertical_chainStyle="spread" />
 
 
    
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="@color/white"
        android:text="你好，我是自定义的气泡效果"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image14" />
 

style文件

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
 
    <style name="RoundedStyle1">
 
        <item name="cornerFamily">roundeditem>
 
        <item name="cornerSize">15dpitem>
 
    style>
 
    <style name="RoundedStyle2">
 
        <item name="cornerFamily">roundeditem>
 
        <item name="cornerSize">50%item>
 
    style>
 
    <style name="RoundedStyle3">
 
        <item name="cornerFamily">cutitem>
 
        <item name="cornerSize">15dpitem>
 
    style>
 
    <style name="RoundedStyle4">
 
        <item name="cornerFamily">cutitem>
 
        <item name="cornerSize">50%item>
 
    style>
 
    <style name="RoundedStyle5">
 
        <item name="cornerFamilyTopLeft">roundeditem>
        <item name="cornerSizeTopLeft">50%item>
        <item name="cornerFamilyBottomLeft">roundeditem>
        <item name="cornerSizeBottomLeft">50%item>
 
        <item name="cornerFamilyTopRight">cutitem>
        <item name="cornerSizeTopRight">50%item>
        <item name="cornerFamilyBottomRight">cutitem>
        <item name="cornerSizeBottomRight">50%item>
 
    style>
 
    <style name="RoundedStyle6">
 
        <item name="cornerFamily">roundeditem>
        <item name="cornerSizeTopLeft">50%item>
        <item name="cornerSizeBottomRight">50%item>
 
    style>
 
    <style name="RoundedStyle7">
 
        <item name="cornerFamily">roundeditem>
 
        <item name="cornerFamilyTopLeft">roundeditem>
        <item name="cornerSizeTopLeft">100%item>
 
    style>
 
 
    <style name="RoundedStyle8">
 
        <item name="cornerFamilyTopLeft">roundeditem>
        <item name="cornerFamilyTopRight">roundeditem>
        <item name="cornerSizeTopLeft">70%item>
        <item name="cornerSizeTopRight">70%item>
    style>
 
    <style name="RoundedStyle9">
 
        <item name="cornerFamilyBottomLeft">roundeditem>
        <item name="cornerFamilyBottomRight">roundeditem>
        <item name="cornerFamilyTopLeft">roundeditem>
        <item name="cornerFamilyTopRight">roundeditem>
        <item name="cornerSizeBottomLeft">25dpitem>
        <item name="cornerSizeBottomRight">25dpitem>
        <item name="cornerSizeTopLeft">70%item>
        <item name="cornerSizeTopRight">70%item>
 
    style>
 
 
resources>