androidcameraandroid-cameraandroid-camera2android-textureview

Need to display a camera preview inside a circular view


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: enter image description here 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.


Solution

  • 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.