CODEWITHSUNDEEP
androidandroid-layoutandroid-camera
Vladislav Kovechenkov
Vladislav Kovechenkov

Reputation: 137

Rectangular frame with transparency for camera

I'm working on Android app with custom camera module. Main purpose of custom camera module is in adding overlay to camera - it should be something like outer transparent border (see first attached pic). It's actually blurred in the attached picture, but I need at least transparent effect as blur is not trivial to implement on Android.

The main point here is to ensure that "clear" visible area is corresponding to A4 format, so height divided by width should be √2 (main purpose of the app is in taking photos of A4 sheets).

desired effect

inverted effect

I've figured how to achieve "inverted" effect - see second picture. But I can't get my head around on how could setup the view for the desired effect - first picture. Could someone share their thoughts on the problem? Here is the code:

camera.xml:

<LinearLayout         
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4">

        <FrameLayout
            android:id="@+id/camera_preview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <View
            android:id="@+id/overlay"
            android:layout_width="316dp"
            android:layout_height="446dp"
            android:layout_centerInParent="true"
            android:background="@drawable/overlay"
            android:duplicateParentState="false" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:background="@android:color/black">

        <Button
            android:id="@+id/button_capture"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/capture_button"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />

        <Button
            android:id="@+id/button_close"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_centerVertical="true"
            android:layout_marginEnd="50dp"
            android:layout_marginRight="50dp"
            android:layout_toLeftOf="@+id/button_capture"
            android:background="@drawable/close" />
  </RelativeLayout>

</LinearLayout>

overlay.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
<solid android:color="#88ffffff" />

Upvotes: 1

Views: 3538

Answers (2)

Vladislav Kovechenkov
Vladislav Kovechenkov

Reputation: 137

I've found an article about just like what I needed. With little effort I could adjust the code there to get desired effect: https://blog.budiharso.info/2016/01/09/Create-hole-in-android-view/

Upvotes: 3

Alex Cohn
Alex Cohn

Reputation: 57173

To avoid tricky vector masks, it's enough to define the id/overlay as layout with 4 semitransparent rectangles, sharing the same drawable you use now: top, bottom, left, and right. You can determine the dimensions of each rectangle at runtime, but if you like intellectual challenges, you can define them as a ConstraintLayout.

Upvotes: 0

Related Questions