How to generate Circle Shape With Outer Ring

user_12483361 0
Viewed 435

How to generate views as shown below,

enter image description here

I tried to adding stroke to cardView(Material cardView) and using it in a recyclerView. I have used multiple views, below is the xml code for the outer ring

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

and the code for circle shape,

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

It works only in pie(android 9) and above. Other devices it appears as below,

enter image description here

The ring should appear on selected views. I should be able to change color programmatically. Thanks.

material-design kotlin android-layout android xml
2 Answers

Try if it works .....Make a ring.xml in your Drawable folder

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

please replace the white color with the color of YOUR BACKGRAOUND

use it wherever you like.eg as the background of your button

You may change the color of the ring in the first item and change the color of circle shape in the last item.

user_142534440

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