How to set the surface view camera background with corner

Question

My app uses a camera surface view layout with a size of 150 X 150. I need to show the surface corner is arc type. how to set the corner in camera.

<LinearLayout
    android:id="@+id/recordView"
    android:layout_width="100dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="50dp"
    android:layout_marginRight="25dp" 
    android:background="@drawable/customshape">
</LinearLayout>

customshape:

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle"> 
 <gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF"         android:angle="270"/> 

<corners android:bottomRightRadius="50dp" android:bottomLeftRadius="50dp" 
 android:topLeftRadius="50dp" android:topRightRadius="50dp"/> 

this layout add the camera activity but record start show the rectangle view

Answer 1

Do this in your layout xml file and it worked for me

<androidx.cardview.widget.CardView
    android:id="@+id/cameraborder"
    android:layout_width="350dp"
    android:layout_height="480dp"
    app:cardCornerRadius="50dp"
    app:cardBackgroundColor="@android:color/transparent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.4"
    tools:ignore="MissingConstraints" >

    <androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        style="@style/Rounded"
        android:layout_width="350dp"
        android:layout_height="480dp"
        tools:ignore="MissingConstraints,UnknownId,VisualLintBounds">

    </androidx.camera.view.PreviewView>
</androidx.cardview.widget.CardView>

Answer 2

After more search i try to write code with cardView it worked for me .

Add dependencies :

implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'

Add code to xml :

 <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="270dp"
            app:cardCornerRadius="10dp"
            app:cardPreventCornerOverlap="false">

            <SurfaceView
                android:id="@+id/camera_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </androidx.cardview.widget.CardView>

Answer 3

Check out this tutorial on how to create an Android shape and apply that shape to your layout: http://www.vogella.com/blog/2011/07/19/android-shapes/

Specifically you use the <corners> attribute of the <shape> to create rounded corners, see example below from the above referenced tutorial:

<corners 
    android:bottomRightRadius="7dp"
    android:bottomLeftRadius="7dp" 
    android:topLeftRadius="7dp" 
    android:topRightRadius="7dp"
/>

UPDATE 2 - This worked for me:

drawable-hdpi/rounded.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> 

    <stroke android:width="2dp" android:color="#FFFFFFFF" />

    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp" 
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/> 

    <solid android:color="#00000000" />

</shape>

drawable-hdpi/solid.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> 

    <stroke android:width="2dp" android:color="#FFFFFFFF" />

    <solid android:color="#00000000" />

</shape>

drawable-hdpi/rounded_inside_corners.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/rounded" />
    <item android:drawable="@drawable/solid" /> 

</layer-list>

Then in my activity layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/my_shape"
    tools:context=".CameraActivity" >

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/rounded_inside_corners"
        android:layout_above="@+id/linearLayout1" />

    <FrameLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/buttonTakePicture"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/camera_click_256"
            android:gravity="center_horizontal" />
    </FrameLayout>

</RelativeLayout>

Which results in:

Answer 4

Hi have a look at this code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="15dip" />
            <solid android:color="#404f64" />
            <stroke android:width="2dp" android:color="#bebfc1"/>
        </shape>
    </item>
</layer-list>

set this as like below in your surface view.

android:background="@layout/rounded"