CameraX Customization: PreviewView, Size & Resolution

Question

CameraX Customization: PreviewView, Size & Resolution

Nathan Sokalski 4,111

I am trying to figure out how to customize the CameraX components of my app. I have figured out how to display the preview using the PreviewView view & take a picture, but I am trying to figure out how to do the following:

Make the PreviewView use the remaining area of the screen. I have tried using layout_rowWeight, but that does not seem to work. I have also tried using things like layout_gravity="Fill", but with no success.
Make the size of the picture taken match the size of the PreviewView. Everything that is visible in the PreviewView MUST be included in the picture that is taken.
Use the maximum resolution. The picture from the camera is not being saved to storage (it is temporary), so file size is not a concern.

If the available sizes are restricted to predefined values, I can deal with that by manually calculating which one will use the maximum amount of the PreviewView. To sum it up, I need to use the maximum amount of space at the maximum resolution. Any ideas? Are there any good tutorials on how to do these things? Thanks.

Anonymous

2022-10-03T08:02:59.607+00:00

Do you want to make the PreviewView to fill the screen?

If you want to specify resolution, you can use this api to set
it.
Nathan Sokalski 4,111 Reputation points

2022-10-03T16:32:43.143+00:00

Do you want to make the PreviewView to fill the screen?

I do not want to fill the entire screen, only the remaining area (area not used by the other View(s)). This will obviously vary depending on screen size. The width will always (if possible) be the full width of the screen (there are no View(s) to the left or right), but there will be View(s) of unknown size below it. Because this will cause the best aspect ratio to be different on different screen sizes, I need to be able to determine the width/height of the remaining area. I am also unsure how to determine the available resolutions & aspect ratios (which I am assuming I will need to choose from based on the resulting size of the PreviewView after it fills the remaining area (or as much of it as possible)). The documentation also says

"You can't set both target aspect ratio and target resolution on the same use case."

Does this mean that the aspect ratio is determined by the Size parameter of setTargetResolution? As mentioned in my original post, I need the result from the camera to have EXACTLY the same content as visible in the PreviewView, while still making the PreviewView as big as possible and using the highest resolution possible. This is my first time doing anything involving the camera, aspect ratios, or resolution, so please excuse my lack of knowledge of certain classes, concepts, or relationships between them.
Anonymous

2022-10-06T06:19:46.743+00:00

Does this mean that the aspect ratio is determined by the Size parameter of setTargetResolution?

No. If you want the aspect ratio, resolution will be changed depend on your displayed height or width and the aspect ratio, resolution is not fixed. When you setTargetResolution, The actual image resolution will be the closest available resolution in size that is not smaller than the target resolution, as determined by the Camera implementation.

You can try to setScaleType to FIT_CENTER for your PreviewView.
Nathan Sokalski 4,111 Reputation points

2022-10-06T17:06:30.76+00:00
I still can't get my PreviewView to use the full remaining area. Here is my current XML:

<androidx.camera.view.PreviewView android:id="@+id/pvCurrent" android:layout_width="match_parent" android:layout_height="250dp" android:layout_column="0" android:layout_row="0" app:scaleType="fitCenter" android:background="@color/Six"/>

I know that this currently has a fixed android:layout_height, but I cannot figure out what to change to use the full remaining height. I tried using android:layout_rowWeight, but that did not work. The other View(s) in my XML (which has a root layout of GridLayout) are a TextView, RecyclerView, and a TextView (all with android:layout_height="wrap_content"). Here is a screenshot of what I currently get:

Notice that (because PreviewView has a fixed height) there is still extra space at the bottom. What do I need to change in PreviewView?
Anonymous

2022-10-07T09:57:05.567+00:00

Is this yellow background belong to the GridLayout or the PreviewView? If it is related to the PreviewView, Please set the android:layout_gravity to fill_horizontal, if it is still not work, could you share this layout code with us?
Nathan Sokalski 4,111 Reputation points

2022-10-07T16:50:48.61+00:00

I tried adding android:layout_gravity="fill_horizontal", but it did not make any difference. Here is the complete xml:

https://github.com/njsokalski/DominoCounter/blob/main/activity_main.xml

Do I need to remove or modify anything else (like android:layout_width or android:layout_height)?
Anonymous

2022-10-10T07:05:36.52+00:00

Thanks for your update. I test your activity_main.xml, PreviewView is fill the screen, this issue is related to the source in the PreviewView, Is android:background="@color/Six" yellow background?
Nathan Sokalski 4,111 Reputation points

2022-10-10T16:37:06.987+00:00

Is android:background="@Color /Six" yellow background?

Yes, @color/Six is the yellow background. I may have stated my problem inaccurately. What I need to do that is not happening is having the actual photo fill the remaining area (the only reason I have a background for the PreviewView is for debugging purposes).
Anonymous

2022-10-11T09:05:57.32+00:00

Now PreviewView is fill the width of screen, but camera view cannot fill the width of screen. You can set bigger value of height of PreviewView, if the yellow area will be decreased. If you do not want to set a bigger value of height, please set a specify resolution and do not setScaleType.
Nathan Sokalski 4,111 Reputation points

2022-10-11T17:34:00.38+00:00
Thanks! I think that is probably what I need. After changing my xml to the following:

<androidx.camera.view.PreviewView android:id="@+id/pvCurrent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_column="0" android:layout_row="0" android:layout_gravity="fill" android:layout_rowWeight="1" android:background="@color/Six"/>

And my Preview to:

this.preview = new Preview.Builder().SetTargetResolution(new Size(1280,720)).Build();

However, because this only seems to work if I include SetTargetResolution, I need to know what resolution to use (which will probably vary depending on the screen size). I need EVERYTHING visible to the user in the PreviewView to be included in the result. I am willing to do this by dynamically decreasing the height of the PreviewView to match the aspect ratio of the result, or by adding padding to the result. How can I determine the best resolution & size of the result returned from the camera?
Anonymous

2022-10-14T09:08:15.64+00:00

You can try to use Xamarin.Essentials: Device Display Information to get device width by var width = mainDisplayInfo.Width;，then you can try to set the solution by screen's width and your specific height.
Nathan Sokalski 4,111 Reputation points

2022-10-14T16:28:17.747+00:00

get device width

It is not the width of the device that I am trying to get, it is whether the size of the visible area (what is displayed on the screen) is the same as the size of what is returned by the camera. I need to guarantee that if it is visible it will be included in the result.
Anonymous

2022-10-19T08:17:50.117+00:00

The camera cannot return the size. Here is a workaround to set the background color of the PreviewView to black.

Your answer

Anonymous

2022-10-03T08:02:59.607+00:00

Do you want to make the PreviewView to fill the screen?

If you want to specify resolution, you can use this api to set
it.
Nathan Sokalski 4,111 Reputation points

2022-10-03T16:32:43.143+00:00

Do you want to make the PreviewView to fill the screen?

I do not want to fill the entire screen, only the remaining area (area not used by the other View(s)). This will obviously vary depending on screen size. The width will always (if possible) be the full width of the screen (there are no View(s) to the left or right), but there will be View(s) of unknown size below it. Because this will cause the best aspect ratio to be different on different screen sizes, I need to be able to determine the width/height of the remaining area. I am also unsure how to determine the available resolutions & aspect ratios (which I am assuming I will need to choose from based on the resulting size of the PreviewView after it fills the remaining area (or as much of it as possible)). The documentation also says

"You can't set both target aspect ratio and target resolution on the same use case."

Does this mean that the aspect ratio is determined by the Size parameter of setTargetResolution? As mentioned in my original post, I need the result from the camera to have EXACTLY the same content as visible in the PreviewView, while still making the PreviewView as big as possible and using the highest resolution possible. This is my first time doing anything involving the camera, aspect ratios, or resolution, so please excuse my lack of knowledge of certain classes, concepts, or relationships between them.
Anonymous

2022-10-06T06:19:46.743+00:00

Does this mean that the aspect ratio is determined by the Size parameter of setTargetResolution?

No. If you want the aspect ratio, resolution will be changed depend on your displayed height or width and the aspect ratio, resolution is not fixed. When you setTargetResolution, The actual image resolution will be the closest available resolution in size that is not smaller than the target resolution, as determined by the Camera implementation.

You can try to setScaleType to FIT_CENTER for your PreviewView.
Nathan Sokalski 4,111 Reputation points

2022-10-06T17:06:30.76+00:00

I still can't get my PreviewView to use the full remaining area. Here is my current XML:

<androidx.camera.view.PreviewView android:id="@+id/pvCurrent" android:layout_width="match_parent" android:layout_height="250dp" android:layout_column="0" android:layout_row="0" app:scaleType="fitCenter" android:background="@color/Six"/>

I know that this currently has a fixed android:layout_height, but I cannot figure out what to change to use the full remaining height. I tried using android:layout_rowWeight, but that did not work. The other View(s) in my XML (which has a root layout of GridLayout) are a TextView, RecyclerView, and a TextView (all with android:layout_height="wrap_content"). Here is a screenshot of what I currently get:

Notice that (because PreviewView has a fixed height) there is still extra space at the bottom. What do I need to change in PreviewView?
Anonymous

2022-10-07T09:57:05.567+00:00

Is this yellow background belong to the GridLayout or the PreviewView? If it is related to the PreviewView, Please set the android:layout_gravity to fill_horizontal, if it is still not work, could you share this layout code with us?
Nathan Sokalski 4,111 Reputation points

2022-10-07T16:50:48.61+00:00

I tried adding android:layout_gravity="fill_horizontal", but it did not make any difference. Here is the complete xml:

https://github.com/njsokalski/DominoCounter/blob/main/activity_main.xml

Do I need to remove or modify anything else (like android:layout_width or android:layout_height)?
Anonymous

2022-10-10T07:05:36.52+00:00

Thanks for your update. I test your activity_main.xml, PreviewView is fill the screen, this issue is related to the source in the PreviewView, Is android:background="@color/Six" yellow background?
Nathan Sokalski 4,111 Reputation points

2022-10-10T16:37:06.987+00:00

Is android:background="@Color /Six" yellow background?

Yes, @color/Six is the yellow background. I may have stated my problem inaccurately. What I need to do that is not happening is having the actual photo fill the remaining area (the only reason I have a background for the PreviewView is for debugging purposes).
Anonymous

2022-10-11T09:05:57.32+00:00

Now PreviewView is fill the width of screen, but camera view cannot fill the width of screen. You can set bigger value of height of PreviewView, if the yellow area will be decreased. If you do not want to set a bigger value of height, please set a specify resolution and do not setScaleType.
Nathan Sokalski 4,111 Reputation points

2022-10-11T17:34:00.38+00:00

Thanks! I think that is probably what I need. After changing my xml to the following:

<androidx.camera.view.PreviewView android:id="@+id/pvCurrent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_column="0" android:layout_row="0" android:layout_gravity="fill" android:layout_rowWeight="1" android:background="@color/Six"/>

And my Preview to:

this.preview = new Preview.Builder().SetTargetResolution(new Size(1280,720)).Build();

However, because this only seems to work if I include SetTargetResolution, I need to know what resolution to use (which will probably vary depending on the screen size). I need EVERYTHING visible to the user in the PreviewView to be included in the result. I am willing to do this by dynamically decreasing the height of the PreviewView to match the aspect ratio of the result, or by adding padding to the result. How can I determine the best resolution & size of the result returned from the camera?
Anonymous

2022-10-14T09:08:15.64+00:00

You can try to use Xamarin.Essentials: Device Display Information to get device width by var width = mainDisplayInfo.Width;，then you can try to set the solution by screen's width and your specific height.
Nathan Sokalski 4,111 Reputation points

2022-10-14T16:28:17.747+00:00

get device width

It is not the width of the device that I am trying to get, it is whether the size of the visible area (what is displayed on the screen) is the same as the size of what is returned by the camera. I need to guarantee that if it is visible it will be included in the result.
Anonymous

2022-10-19T08:17:50.117+00:00

The camera cannot return the size. Here is a workaround to set the background color of the PreviewView to black.

Share via

CameraX Customization: PreviewView, Size & Resolution

Your answer