Create a transparent shape in a different shape

Sorry if this is a very simple question; I am still new to many Androids and I learn as I go!

I currently have a shape listed in the drawable folder for a black rectangle with 60% opacity that takes up the entire screen. It creates a kind of "tinted window" effect when placed over an image.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tinting_rectangle">
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="5dp" />
    <solid android:color="#99000000" />
</shape>

      

My goal, however, is to create a circular "opening" in this shade right in the middle of the rectangle. Basically, a transparent oval that allows you to see the past of the tinting in one spot to see the background below.

I thought it would be something like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tinting_rectangle">
            <stroke android:width="2dp" android:color="#ff207d94" />
            <padding android:left="2dp"
                android:top="2dp"
                android:right="2dp"
                android:bottom="2dp" />
            <corners android:radius="5dp" />
            <solid android:color="#99000000" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="#00FFFFFF" />
            <padding 
                android:left="@dimen/tint_padding" 
                android:top="@dimen/tint_padding" 
                android:right="@dimen/tint_padding" 
                android:bottom="@dimen/tint_padding" /> 
        </shape>
    </item>
</layer-list>

      

However, this did not fulfill the purpose I was looking for; I still have a giant solid rectangle with 60% opacity.

Does anyone have a suggestion on what can do this in XML (if you want to keep this as a nodpi solution)? A "tinted window" rectangle with a hole in the middle to see everything behind it.

Thank!

EDIT: Optional: Since you can see the oval in the second example, I use static padding to center it in the rectangle. Obviously this won't work. If anyone has a good suggestion to make sure the oval is always centered in the rectangle, that would be very helpful too!

+3


source to share





All Articles