如何在 android 中创建这样的布局？

Question

I want to create one screen where I can click image of card as shown in below given image.

I have created screen like this with code as given below and this code actually works but I'm just not sure how to add that card cutout layout on this.

<RelativeLayout
            android:id="@+id/rlCamera"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible">

            <androidx.camera.view.PreviewView
                android:id="@+id/viewFinder"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0.5"
                android:background="@color/black" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <RelativeLayout
                    android:layout_width="@dimen/_24sdp"
                    android:layout_height="@dimen/_24sdp"
                    android:layout_margin="@dimen/_15sdp">

                    <com.google.android.material.card.MaterialCardView
                        android:layout_width="@dimen/_34sdp"
                        android:layout_height="@dimen/_34sdp"
                        android:alpha="0.2"
                        app:cardBackgroundColor="@color/white"
                        app:cardCornerRadius="@dimen/_50sdp" />

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="@dimen/_15sdp"
                        android:layout_height="@dimen/_15sdp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/ic_close"
                        android:tint="@color/white" />

                </RelativeLayout>

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="@dimen/_25sdp"
                    android:text="License"
                    android:textColor="@color/white"
                    android:textSize="@dimen/_14sdp"
                    android:textStyle="bold" />

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/_120sdp"
                    android:gravity="center_horizontal"
                    android:orientation="vertical">

                    <androidx.camera.view.PreviewView
                        android:id="@+id/viewFinderCard"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/_150sdp"
                        android:layout_marginHorizontal="@dimen/_40sdp" />

                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/_40sdp"
                        android:text="Front of card"
                        android:textColor="@color/white"
                        android:textSize="@dimen/_14sdp"
                        android:textStyle="bold" />

                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginHorizontal="@dimen/_70sdp"
                        android:layout_marginTop="@dimen/_10sdp"
                        android:text="All 4 corners should be aligned to card given above."
                        android:textAlignment="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/_12sdp" />

                </androidx.appcompat.widget.LinearLayoutCompat>

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/imgCapture"
                    android:layout_width="@dimen/_54sdp"
                    android:layout_height="@dimen/_54sdp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="@dimen/_40sdp"
                    android:src="@drawable/ic_capture" />

            </RelativeLayout>

        </RelativeLayout>

Result

But now I'm not sure how to add the transparent cutout for card image rectangle.

Can anyone help me with this?

Answer 1

I strongly recommend to use 9-patch bitmap for such cutout. if some ViewGroup have solid/semitransparent/image as a background then its hard to "cut out" some part of it from child side, you should override onDraw then and make some manual math and job on Canvas ... it should be at least drawable , but your sample isn't easy to be made programmatically (especially colooured corners).

would be way easier to set 9-patch as background for whole layout in place of currently set "@color/black" and alpha . be aware of content and stretch areas and set some maxWidth and maxHeight (or fixed) for frame with card preview. 9-patch will wrap it nicely