androiduser-interfaceshapesrounded-cornersandroid-camerax

Android Studio: Rounded corner for camera preview


This is my first time posting here. I would like to ask if you have an idea how to make the layout of the camera view finder like with Instagram or BeReal (with rounded edges). Attached below is the sample output.

Sample Output: BeReal Camera User Interface

This is what I currently have (Android Studio emulator): Android Studio Emulator

This is my code for the camera view:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".InterpreterFragment">
    
    <androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        android:layout_width="match_parent"
        android:layout_height="500dp" />
</FrameLayout>

I am trying to search for the <shape> view but I can't seem to make it work. Thanks.

I tried using <shape> by creating a shape drawable. The code is below:

<?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="20dp"
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>

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

</shape>

And tried setting it as background or foreground of the camera view but it does not work.


Solution

  • I solved this problem months ago but if anyone's interested, use a CardView and put the PreviewView inside it.

    Sample code:

    <androidx.cardview.widget.CardView
        android:id="@+id/viewfinder_cardview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginHorizontal="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="100dp"
        app:cardCornerRadius="20dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" >
    
        <androidx.camera.view.PreviewView
            android:id="@+id/viewFinder"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        
    </androidx.cardview.widget.CardView>