Drawing a background outside a drawable

Question

I have to make my own camera preview and I don't know how can I fill those transparent corners like the rest of the screen. I have used Linears to paint the surface but maybe there is other better solution.

This is my Camera Preview Layout

<LinearLayout
    android:layout_width="match_parent"
    android:weightSum="3"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        android:layout_weight="1"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:weightSum="7"
        android:layout_weight="1"
        >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/white_transparent"
            android:layout_weight="1"
           />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@drawable/barcode_scanner_background"
            android:layout_weight="5"
            ></LinearLayout>



        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/white_transparent"
            android:layout_weight="1"
           />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        android:layout_weight="1"
        />

</LinearLayout>

And this is my shape background

 <?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:bottomLeftRadius="25dp" android:bottomRightRadius="25dp" android:topLeftRadius="25dp" android:topRightRadius="25dp" />
            <padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp" />
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="1dip" android:color="@color/green" />
        </shape>
    </item>
</selector>

Thanks in advance!

Answer 1

Finally I solved it creating my Custom View

class CustomView : View {

var paint = Paint()
var path = Path()

constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

override fun onDraw(canvas: Canvas) {
    paint.strokeWidth = 0f
    paint.isAntiAlias = true
    paint.style = Paint.Style.FILL_AND_STROKE
    paint.color = ContextCompat.getColor(context, R.color.white_transparent)

    val frame = RectF(0f, 0f,canvas.width.toFloat(), canvas.height.toFloat())

    path.fillType = Path.FillType.INVERSE_EVEN_ODD
    path.addRoundRect(frame, 60f, 60f, Path.Direction.CW)
    canvas.drawPath(path, paint)

    paint.strokeWidth = 3f
    paint.isAntiAlias = true
    paint.style = Paint.Style.STROKE
    paint.color = ContextCompat.getColor(context, R.color.green)

    val board = RectF(1f, 1f,canvas.width.toFloat()-1f, canvas.height.toFloat()-1f)
    canvas.drawRoundRect(board, 55f, 55f, paint)
    }
}

And my layout using constraintLayout...

<android.support.constraint.ConstraintLayout 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:id="@+id/camera_preview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.qrpayment.QRCaptureActivity">

    <com.journeyapps.barcodescanner.DecoratedBarcodeView
        android:id="@+id/zxing_barcode_scanner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:zxing_scanner_layout="@layout/custom_barcode_scanner"></com.journeyapps.barcodescanner.DecoratedBarcodeView>


    <com.vipera.onepay.ui.component.custom.CustomView
        android:id="@+id/customView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RelativeLayout
        android:id="@+id/leftView"
        android:layout_width="128px"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        app:layout_constraintBottom_toBottomOf="@+id/customView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/customView"
        app:layout_constraintTop_toTopOf="@+id/customView">

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/rightView"
        android:layout_width="128px"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        app:layout_constraintBottom_toBottomOf="@+id/customView"
        app:layout_constraintLeft_toRightOf="@+id/customView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/customView">

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/topView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        app:layout_constraintBottom_toTopOf="@+id/customView"
        app:layout_constraintTop_toTopOf="parent">

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white_transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/customView">

    </RelativeLayout>

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/toggle_switch"
        android:focusable="false"
        android:layout_marginStart="-16dp"
        app:layout_constraintTop_toBottomOf="@id/customView"
        app:layout_constraintLeft_toLeftOf="@id/customView"
        android:focusableInTouchMode="false"
        android:textOff=""
        android:textOn="" />


</android.support.constraint.ConstraintLayout>

With this result:

I have some extrange behaviour depending on the device

For example on a Mi8 this happens coming back from background and on a Huawei p8 happens when I recieve a notification or tapping on google assistant.