如何在另一个透明背景中进行透明切割？

Question

I would like to make tutorial of new elements in layout, where I put another layer on my whole view. Then I would like to cut some places to see the layer underneath. In brief cut out that adjusts to the element underneath.

Now I make another black transparent layout. Then create another layout with white transparent, but it doesn't clean, delete my area with black transparent so effect is like in picture. This place should be with transparent white to see what is underneath. In code look at @+id/test

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusableInTouchMode="true">

  

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
[ my linear layout with elements]
    
                </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tutorial"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/tutorial_background">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/test"
            android:layout_width="380dp"
            android:layout_height="32dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="16dp"
            android:background="@color/tutorial_white_background"
            android:padding="8dp" />

        <Button
            android:id="@+id/btnGoToWorkList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:layout_marginEnd="100dp"
            android:layout_marginBottom="100dp"
            android:text="OK, TAKE ME TO WORK LIST"
            app:layout_constraintBottom_toTopOf="@+id/tutorialDontShowAgain"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    
        <CheckBox
            android:id="@+id/tutorialDontShowAgain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:buttonTint="@color/mdtp_white"
            android:text="@string/tutorial_dont_show_again"
            android:textColor="@color/mdtp_white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Screen test

Answer 1

You can do it very easily, by using third party library :

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Add the library to your module build.gradle

dependencies {
    implementation 'com.github.faruktoptas:FancyShowCaseView:1.3.9'
}

Sample Usage

new FancyShowCaseView.Builder(this/*Pass Your Context Here*/)
        .focusOn(view/*Pass Your View Object On Which You Want To Focus On*/)
        .title("Pass Title Here")
        .build()
        .show();

You can see result here :