How to make two layer circular corner in textview in android-CodePudding

This drawable :

 <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <solid android:color="#70628b" />
        <stroke android:width="12dp"
            android:color="#4c3f6e"
            />
        <corners android:radius="8dp"/>
    </shape>

This is my textview

 <TextView
                    android:id="@ id/tv_disabled_frame"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/disabled_transparent_frame"
                    android:fontFamily="@font/inter_medium"
                    android:gravity="center"
                    android:padding="@dimen/dp_24"
                    android:text="02 : 45"
                    android:textColor="@color/white"
                    android:textSize="@dimen/dp_32"
                    android:textStyle="bold"
                    android:visibility="visible" />

I am trying to apply circular drawable in inside and outside but given code its showing only outer :

Current screen using this code :

Expected screen

I am unable to do circular please help me in this .

CodePudding user response：

try this code

It can show nested corner

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#4c3f6e" />
            <corners android:radius="8dp" />

            <padding
                android:bottom="12dp"
                android:left="12dp"
                android:right="12dp"
                android:top="12dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#70628b" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

CodePudding user response：

note that your "expected screen" has some small shadow under inner color area, you won't achieve this with common drawable, even with layer-list

I would advice you to use CardView

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/outer_background"
    android:padding="12dp">
    
    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp"
        app:cardBackgroundColor="#70628b">
        
        <TextView ...

adjust elevation param for more/less shadow

outer_background.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#4c3f6e" />
    <corners android:radius="8dp"/>
</shape>

be pixel-perfect, build beautiful apps!