androidlayer-list

How to draw 3 circles on top of each other that are each transparent differently?


enter image description here I'm trying to create a layer of 3 circles that are all inner. And inside I will have a image of flowers.

The background can change... If it sat on a blue background it will be blue shades. So I need to somehow adjust the transparrencies to make this work. The center MUST ALWAYS be white completely though. I then want to add my image in the center.

I created a layer list to achieve this but I can't get the circles to be transparent and I can only get two circles to appear? How would I get the bitmap to appear in the center?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger  circle in back -->
    <item>
        <shape android:shape="oval">
            <solid android:color="#726"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00f"/>
            <size
                android:width="25dp"
                android:height="25dp"/>
        </shape>
    </item>
    <!-- Smaller  circle in front -->
    <item>
        <shape android:shape="oval">
            <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
            <stroke android:color="@android:color/transparent"
                android:width="5dp"/>
            <solid android:color="#f00"/>
            <size
                android:width="10dp"
                android:height="10dp"/>
        </shape>
    </item>
</layer-list>

Solution

  • Try this

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item>
            <shape android:shape="oval">
                <solid android:color="#b5ed9259" />
                <size
                    android:width="30dp"
                    android:height="30dp" />
            </shape>
        </item>
    
        <item>
            <shape android:shape="oval">
                <stroke
                    android:width="5dp"
                    android:color="@android:color/transparent" />
                <solid android:color="#cff27527" />
                <size
                    android:width="25dp"
                    android:height="25dp" />
            </shape>
        </item>
    
        <item
            android:bottom="2dp"
            android:left="2dp"
            android:right="2dp"
            android:top="2dp">
            <shape android:shape="oval">
                <stroke
                    android:width="5dp"
                    android:color="@android:color/transparent" />
                <solid android:color="#fbda5807" />
                <size
                    android:width="20dp"
                    android:height="20dp" />
            </shape>
        </item>
    
        <item
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp">
            <shape android:shape="oval">
                <stroke
                    android:width="5dp"
                    android:color="@android:color/transparent" />
                <solid android:color="#FFFFFF" />
                <size
                    android:width="30dp"
                    android:height="30dp" />
            </shape>
        </item>
    
        <item
            android:bottom="5dp"
            android:drawable="@drawable/ic_fav"
            android:gravity="center"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp"/>
    
    </layer-list>
    

    OUTPUT

    enter image description here