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!
source to share
No one has answered this question yet
Check out similar questions: