如何用外圈生成圆形

Question

如下图如何生成视图，

我尝试将笔画添加到 cardView(Material cardView) 并在 recyclerView 中使用它。我用了多个视图，下面是外环的xml代码

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginStart="6dp"
    android:layout_marginEnd="6dp"
    android:gravity="center">

    <com.google.android.material.circularreveal.cardview.CircularRevealCardView
        android:id="@+id/selectedCardColor"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:visibility="visible"
        app:cardBackgroundColor="@color/app_color_white"
        app:strokeColor="@color/app_color_green"
        app:strokeWidth="1dp"
        app:cardCornerRadius="28dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="false">

        <com.google.android.material.circularreveal.cardview.CircularRevealCardView
            android:id="@+id/selectedCardInnerColor"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_gravity="center"
            android:layout_margin="6dp"
            app:cardBackgroundColor="@color/app_color_green"
            app:cardCornerRadius="28dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="false" />
    </com.google.android.material.circularreveal.cardview.CircularRevealCardView>
</LinearLayout>

以及圆形的代码，

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/parent"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp">

<com.google.android.material.card.MaterialCardView
    android:id="@+id/unSelectedCardColor"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginTop="3dp"
    android:layout_marginBottom="3dp"
    app:cardBackgroundColor="@color/app_color_green"
    app:cardCornerRadius="28dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="false" />
</LinearLayout>

它仅适用于 pie(android 9) 及更高版本。其他设备如下所示，

圆环应该出现在选定的视图上。我应该能够以编程方式更改颜色。谢谢。

Answer 1

试试它是否有效.....在你的 Drawable 文件夹中创建一个 ring.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="20dp" android:left="20dp"  android:bottom="20dp"  android:right="20dp" >
        <shape >
            <solid android:color= "#FF0000"/>
            <corners android:radius="300dp"/>
        </shape>
    </item>
    <item  android:left="40dp"  android:bottom="40dp" android:top="40dp" android:right="40dp"    >
        <shape >
            <solid android:color= "#ffffff"/>

            <corners android:radius="300dp"/>
        </shape>
    </item>
    <item   android:left="60dp"  android:bottom="60dp" android:right="60dp"  android:top="60dp" >
        <shape >
            <gradient
                android:startColor="#00ffff"
                android:endColor="#0000ff"
                android:angle="90"/>
            <corners android:radius="300dp"/>
            <stroke android:width="1dp"/>
        </shape>
    </item>
</layer-list>

请用YOUR BACKGRAOUND

的颜色替换白色

在任何你喜欢的地方使用它。例如作为按钮的背景

您可以在第一项中更改环的颜色，在最后一项中更改圆形的颜色。

Answer 2

Please Try Below code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="5dp"
    android:left="5dp"
    android:bottom="5dp"
    android:right="5dp" >
    <shape >
        <solid android:color= "#090909"/>
        <corners android:radius="400dp"/>
    </shape>
</item>
<item  android:left="10dp"
    android:bottom="10dp"
    android:top="10dp"
    android:right="10dp">
    <shape >
        <solid android:color= "#ffffff"/>
        <corners android:radius="300dp"/>
    </shape>
</item>
<item
    android:left="20dp"
    android:bottom="20dp"
    android:right="20dp"
    android:top="20dp" >
    <shape
        android:shape="oval">
        <solid
            android:color="#9C27B0"/>
        <size
            android:width="200dp"
            android:height="200dp"/>

    </shape>
</item>