Need to display a camera preview inside a circular view

Question

I need to implement a circular camera preview. I am using camera2 api with TextureView. I added the layout as follows:

 <FrameLayout>
 <TextureView/>
 <CircularImageView/>
 <FrameLayout/>

Doing this I am getting the below result:

As you can see, the camera preview is displayed in a square, but I want that to be a circular one, also keeping the yellow image in the background. How can I achieve this ? I did refer few examples on similar questions perviously asked but they are done using old camera api and not TextureView.

Any help is appreciated.

Answer 1

Instead of CircularImageView, you need a regular image view, where you load a png with circular transparent hole of desired size.

So, the proposed hierarchy could be something like this:

<FrameLayout size="match_parent">
   <TextureView size=<calculated_to_match_camera> centered />
   <ImageView size="match_parent" src="full-screen-gradient-with-transparent-circle-in-center.png" />
<FrameLayout />

The shorthand above assumes size --> android:width and android:height. The texture size is set programmatically to fit the camera preview aspect ratio, and have the region of interest exposed through the circular hole in the ImageView layer above it.