1

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.

user2234
  • 1,282
  • 1
  • 21
  • 44

1 Answers1

0

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.

Alex Cohn
  • 56,089
  • 9
  • 113
  • 307
  • true, but then still how do I set the TextureView to the circular image ? As you see the TextureView is still a square. Also the problem is the background image (which is yellow right now) is going to be a gradient image, so I cannot have a square image view and make the corners opaque and the circle trasnparent @Alex Cohn – user2234 Nov 12 '17 at 05:17
  • You don't need to set TextureView to a circular image; you only need a circular "window" into the rectangular camera preview. As for a gradient background, consider making the whole background one image with a transparent circle (see updated answer). – Alex Cohn Nov 12 '17 at 06:51
  • 1
    Thanks for the solution! I drew a transparent circle on top of the gradient image overlaying on top of the camera view and was able to achieve the look I wanted. – user2234 Nov 16 '17 at 03:06
  • one problem I am facing is the preview displayed in that circle is large, I just want it to be small enough to capture a face holding the device in the hand. I tried to set the TextureView width and height to same in the layout, but the image appears to be squeezed. Is there any way I can set the preview to be a smaller one by maintaining the aspect ratio? – user2234 Nov 16 '17 at 07:05
  • I don't understand your question exactly. A screenshot or sketch could help – Alex Cohn Nov 16 '17 at 09:30
  • The camera preview is displayed on the whole of the screen and I am drawing the circle on top of it. If I had to hold the device in my hand to click a selfie, then only a part of my face would be visible in that circle area as its a small radius circle. I am looking for a way where I can reduce the size of the preview I see, so that whole face can be seen in the preview. The sketch could be the same I put above, just imagine clicking a selfie with it, it would not fit a face in that area. Will try to sketch it – user2234 Nov 16 '17 at 10:35
  • Ah, got it. As you see in my answer, the size of TextureView should be calculated anyways to match the aspect ratio of preview (i.e. 4:3 or 16:9 or maybe even more, this changes from device to device). Normally we try to make this size as large as possible (as long as it fits onto the screen). But you are free to scale it down. – Alex Cohn Nov 16 '17 at 12:02