Develop Reference

Android Camera Preview on a square screen stretched

I'm building an app for Android but The device do have a square screen. The screen is 320x320 and the camera app use the SurfaceView to show the preview as below :
mCameraView = (SurfaceView) findViewById(R.id.surface);
LayoutParams params = mCameraView.getLayoutParams();
int camera_dimension = getResources().getInteger(R.integer.camera_dimension);
params.height = camera_dimension; //320px
params.width = camera_dimension;
mCameraView.setLayoutParams(params);
mCameraViewHolder = mCameraView.getHolder();
mCameraViewHolder.addCallback(this);
mCameraViewHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
On Surface changed, I'm doing this and it works but the supporter preview is w480 x h320
public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) {
int mWidth = w;
int mHeight = h;
int mFormat = format;
try {
mCameraAccess.mCamera.stopPreview();
} catch (Exception e){
// ignore: tried to stop a non-existent preview
}
Camera.Parameters param = mCameraAccess.mCamera.getParameters();
List<Camera.Size> SupportedPreview = param.getSupportedPreviewSizes();
int ScreenSize = getResources().getInteger(R.integer.camera_dimension);
for (int i = 0; i < SupportedPreview.size(); i++) {
if (SupportedPreview.get(i).height == ScreenSize) {
param.setPreviewSize(SupportedPreview.get(i).width, SupportedPreview.get(i).height);
break;
}
}
mCameraAccess.mCamera.setParameters(param);
mCameraAccess.mCamera.startPreview();
}
How can make sure that my preview inside the viewholder is not compressed but a kind of centercrop. As the preview is a rectangle, I just need the square centered on the image. Usually I'm using scaleType but it's not supported in Surface view
Any idea ?

The solution which i have figured out is:
1)-Keep surface view full screen,so that is doesn't stretch.
2)-Put a view over surfaceview with full opacity.So that is looks like camera is already squared.
3)-After capturing image or video,you will have to crop them.
For video you have to use some video processing library like javacv.Using this library you can extract video frames,convert them to bitmap,crop bitmap in square and then re-encode into video.
To get accurate results you will need to play around with different techniques like zooming camera during capture etc. according to your needs.
Original Image:
Squared Image:

RelativeLayout for Android?

So I have been experimenting today with making an Android Application, but I have tried the LineairLayout to make a welcom screen for my application, but I cannot get it right..
So I tried RelativeLayout and I saw I can move my ImageViews and buttons to everywhere. So my question is if I will move the items to places like center, bottom left and bottom right. Would this be a problem or all phones since not all phones have the same dimensions?
public class WelcomeActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome_screen_relative);
final ImageView logo = (ImageView) findViewById(R.id.myImageView);
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
int displayHeight = metrics.heightPixels;
int displayWidth = metrics.widthPixels;
float scaledDensity = metrics.scaledDensity;
BitmapFactory.Options dimensions = new BitmapFactory.Options();
dimensions.inJustDecodeBounds = true;
Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.log, dimensions);
int imageHeight = dimensions.outHeight;
int imageWidth = dimensions.outWidth;
float percentageToMoveViewDown = (float) 20.0;
float viewY_float = (float) ((displayHeight / 100.0) * percentageToMoveViewDown);
int viewY_int = Math.round(viewY_float);
RelativeLayout.LayoutParams view_Layout_params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
view_Layout_params.topMargin = viewY_int;
logo.setLayoutParams(view_Layout_params);
logo.getLayoutParams().height = imageHeight;
logo.getLayoutParams().width = imageWidth;
}

Thats depends. If you give objects a fixed size of course it will. for dp/dpi make sure to test it in Emu or real devices. You can also create density and orientation specific layout to support many screens. Consider that there are not only changes in size but also aspect ration and resolution and DPI.
For most apps RelativeLayout is might be the right approach.
You can read an excelent article about it here: http://developer.android.com/guide/practices/screens_support.html

If the items have fixed sizes you always will have trouble with some phones. For the big ones it may be too small, for the small ones too big...
In my experience Androids small/normal/large screens won't help you much for configuring, since the differences are just too big.
If you want to make sure everything sits where it belongs to, you could get the device metrics. That way you don't even need to rely on center, but you can work with percentages to place everything where you want it to be. Plus you can set the sizes in percentage, which is great. Like you could say I want a button thats width is 50% of the screen, no matter how large the screen is. Its more work (maybe even overkill), but I really like that approach. Once you figured it out its basically just a bit copy paste at the start of your classes.
Example:
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
int displayHeight = metrics.heightPixels;
int displayWidth = metrics.widthPixels;
float scaledDensity = metrics.scaledDensity;
//move some View 20% down:
float percentageToMoveViewDown = (float) 20.0;
float viewY_float = (float) ((displayHeight / 100.0) * percentageToMoveViewDown);
int viewY_int = Math.round(viewY_float);
RelativeLayout.LayoutParams view_Layout_params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
view_Layout_params.topMargin = viewY_int;
view.setLayoutParams(view_Layout_params);
//even works with text size for a TextView:
float percentageToResizeTextViewTextSize = (float) 3.1;
float textViewTextSize_float = (float) ((displayHeight / 100.0) * percentageToResizeTextViewTextSize);
int textViewTextSize_int = Math.round(textViewTextSize_float / scaledDensity);
textView.setTextSize(textViewTextSize_int);
Just a side note for the overkill thing: This should be only necessary if you want to support small devices (they mostly run something like android 2.3, but still are sold as budget phones) and big devices as well, but the trouble with the big ones is not as big as the trouble with the small ones. I personally rather put more effort in it than less, you never know.
Edit: ImageView by code
The easiest way is to do it hybridly, using xml and code. Note that you will have to change width and height if you set it to 0 in xml like in the following example.
Just place it in the xml where you would anyways, somewhere in your RelativeLayout.
In your xml:
<ImageView
android:id="#+id/myImageView"
android:layout_width="0dp"
android:layout_height="0dp" />
In your Code:
ImageView myImageView = (ImageView)findViewById(R.id.myImageView);
You now can work with that myImageView as I did it with view and textView. You can even set the image right here in code.
This imageView with the size of 0,0 is now placed where it would have been before. Now you could set the width to like 50% of the screenwidth and the height to...lets say 40% of the screen height. Then You would need to place it. If you want to center it you know that there must be 25% of the screen on each side, so you can add 25% as left and right margin.
Edit 2: maintain original imagesize
If you want to keep the original size of a image in your drawables, you can get its width and height like this:
BitmapFactory.Options dimensions = new BitmapFactory.Options();
dimensions.inJustDecodeBounds = true;
Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.yourImageName, dimensions);
int imageHeight = dimensions.outHeight;
int imageWidth = dimensions.outWidth;
Now that you have that, you could use it to calculate the aspect ratio to keep it.
Now since you know the devices width and height, you can easily calculate how much of the screen this image will need.(imageheight/screenheight*100 = your percentage of the screen you want the imageviews height to be). So the Height you set to the imageview would be displayHeight / 100 * (imageHeight / displayHeight * 100).
How to place that?
Now if you take a Screenheight of 100 and a imageheight of 80 you get 80%. You would now take this percentage and divide it from 100. Divide that /2 and you know how much space you would have as top and bottom margins if you wanted it to be placed in the middle of the screen (you would have to do the same for width).
Caution: If you don't want it to be relative to the screensize but the original size, that percentage approach is kind of pointless. If you do to your image what I just described, it may still be too big for small devices and too small for big ones. Instead you could think about what percentage would look good in proportion to the rest of the stuff on the screen and resize it to that, since it would have that relative size on all devices.
Edit 3:
Since you load the image in original size, it will be small on big devices if it is a small image.
//first you need to know your aspect ratio.
float ratio = imageWidth / imageHeight;
//lets say you wanted the image to be 50% of the screen:
float percentageToResizeImageTo = (float) 50.0;
float imageX_float = (float) ((displayHeight / 100.0) * percentageToResizeImageTo);
int imageX_int = Math.round(imageX_float);
//now you know how much 50% of the screen is
imageWidth = imageX_int;
imageHeight = imageWidth * ratio;
RelativeLayout.LayoutParams view_Layout_params = new RelativeLayout.LayoutParams(imageHeight, imageWidth);
view_Layout_params.topMargin = viewY_int;
logo.setLayoutParams(view_Layout_params);
logo.setScaleType(ImageView.ScaleType.Fit_XY);

Crop a surface view in Android

Here's what I need:
I have a Surface view that has a square (image view) on top of it. I need to capture an image, and crop out the area that was visible only within the square.
This code gives me decent results but specific only to some devices:
int width=(int)(bitmap.getWidth()*60/100);
int height=(bitmap.getHeight()*100/100); //dont change
bitmap=Bitmap.createBitmap(bitmap,150,0, width-55, height);
Is there any way I could generalize this code? Is there any other way to get what I need?
EDIT: This is how I got it to work-
Save the image from the surface view as a bitmap (This is very simple. There are many examples available on the internet that show how to do that)
Use this code in a function, and call it after the image is clicked
//bitmap is the object where the image is stored
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int left;
if(width > height){
left = (width - height)/2;
}
else {
left = (height - width)/2;
}
bitmap=Bitmap.createBitmap(bitmap,left,0, height, height);

Nexus 4 Camera preview aspect Ratio always requires 16x9 surfaceview? Why

Device Nexus 4
Android ver: 4.2.2
Hoping someone else has found this and can explain how to resolve it....
Nexus 4 supports the following preview sizes: -
W:1280 H:720 Ratio: 1.777777
W:800 H:480 Ratio: 1.6666666
W:768 H:432 Ratio: 1.7777778
W:720 H:480 Ratio: 1.5
W:640 H:480 Ratio: 1.3333334
W:576 H:432 Ratio: 1.3333334
W:480 H:320 Ratio: 1.5
W:384 H:288 Ratio: 1.3333334
W:352 H:288 Ratio: 1.2222222
W:320 H:240 Ratio: 1.3333334
W:240 H:160 Ratio: 1.5
W:176 H:144 Ratio: 1.2222222
myCamera.setPreviewSize() sets them, and when I call myCamera.getPreviewSize() I get the correct one that I set, BUT.... If I set my surface view to the same size as my camera preview then I get a stretched image. e.g.
setPreviewSize(640,480)
getPreviewSize -> I get 640,480
Surface view (640,480) -> Stretched image
Only if I set my Surface view to 16x9 (1.77777) do I get a perfect image.
Surface view (1280,720) -> Perfect image
This is the only device that I have this issue with. Please can someone advise if there is a camera setting I am missing for full screen mode or something that is stopping this from working.
In my long search I found 1 other post which relates also to this issue, but not an answer, just a bit more evidence of my problem
PictureCallback not called unless using supportedsizes[0]
Thanks

On the Nexus 4, there's an unfortunate issue where the preview aspect ratio and the still picture aspect ratio are tied together, even if you never take a picture. If they don't match, one of the two gets distorted (typically preview, since it is the lower resolution).
If you want to use a 4:3 preview, configure the still picture size to be 4:3 as well, before starting preview. For example, 640x480 preview with a full 8MP picture size (3264 x 2448) on N4 should cause no stretching for preview.
Use Camera.Parameters.setPictureSize to select the picture size; the list of available sizes can be read from Camera.Parameters.getSupportedPictureSizes.

This method calculate the best (for me) screen size for each device. But, I have the same problem like you when I tried this code in the Nexus 4. So, my solution is to have a special case in the end of this method which gets the width of the nexus 4 and calculates the best height for this device.
The last case could be used in all devices. You could delete the first part of the method.
private void setAspectResolutionCamera(Parameters camParams, int screen_width, int screen_height) {
boolean chosen_one_resolution = false;
//Init screen sizes
width_video = ConstantsCamera.VIDEO_ASPECT_WIDTH;
height_video = ConstantsCamera.VIDEO_ASPECT_HEIGHT;
float aspect_ratio = 1f;
int aspect_width = 6000, aspect_height = 6000;
List<Size> supported_sizes_list = camParams.getSupportedPreviewSizes();
for (int i = 0; i < supported_sizes_list.size(); i++) {
Size size = supported_sizes_list.get(i);
float aspect = (float) size.height / size.width;
if (ConstantsCamera.VIDEO_ASPECT_RATIO - aspect <= aspect_ratio && (aspect - ConstantsCamera.VIDEO_ASPECT_RATIO >= 0)) {
if (screen_width - size.height <= aspect_width && size.height - screen_width >= 0) {
if (screen_height - size.width < aspect_height) {
height_video = size.width;
width_video = size.height;
aspect_ratio = ConstantsCamera.VIDEO_ASPECT_RATIO - (float) size.height / size.width;
aspect_width = screen_width - size.height;
aspect_height = screen_height - size.width;
chosen_one_resolution = true;
}
}
}
}
//Special case
if (width_video != screen_width && !chosen_one_resolution) {
height_video = screen_width * height_video / width_video;
width_video = screen_width;
}
}

Try setting the size of your surfaceview based on the ratio of the camera parameters that you are using.

Stretching camera preview to full screen in android

I am using this camera preview application for my Android app.
I want the camera preview over the full screen.Hence I used the example from Android APIs to try setting the preview to full screen. This is how I am trying to do it:
if (!cameraConfigured) {
Camera.Parameters parameters=camera.getParameters();
Camera.Size size = getOptimalPreviewSize(mSupportedPreviewSizes, width, height);
if (size != null) {
parameters.setPreviewSize(size.width, size.height);
camera.setParameters(parameters);
cameraConfigured=true;
}
I am using relative layout as my layout. My layout settings are follows:
<android.view.SurfaceView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
I am still not able to preview my camera over the entire screen. I would like to know how to preview over the entire screen.

I found the problem. I added the following setting to Android Manifest file
<supports-screens android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true" android:xlargeScreens="true"/>
I am able to view the camera over full screen.

Im assuming your code is within a class that extends SurfaceView and that you will place the surfaceView inside a FrameLayout that is as large as the display.
What you are not doing in your code is setting your SurfaceView to be the same size as the display which in the following code block is done by getting the layout, and setting the width and height.
I use the following code to stretch to the dimensions of the screen:
public class CameraPreview extends SurfaceView implements SurfaceHolder.Callback {
...
public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) {
...
final DisplayMetrics dm = this.getResources().getDisplayMetrics();
Camera.Parameters parameters = mCamera.getParameters();
parameters.setPreviewSize(cameraSize.width, cameraSize.height);
mCamera.setParameters(parameters);
//Here you get the SurfaceView layout and subsequently set its width and height
FrameLayout.LayoutParams frameParams = (FrameLayout.LayoutParams) this.getLayoutParams();
frameParams.width = LayoutParams.MATCH_PARENT;// dm.widthPixels should also work
frameParams.height = LayoutParams.MATCH_PARENT;//dm.heightPixels should also work
this.setLayoutParams(frameParams);
//And we should have things set now...
....
}
...
}
I hope this helps. The key parts to integrate are between those inner comments

Get dimensions of the screen
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
int width = displayMetrics.widthPixels;
use this width and height to get preview size.

First, get the display width and height:
int dw = currentDisplay.getWidth(); // dw == display width
int dh = currentDisplay.getHeight(); // dh == display height
Then loop through the supported preview sizes, and pick the largest one where, if
(size.width <= dw && size.height <= dh). When you hit one where this if statement
fails, use the previous values (you could set something like prevWidth and prevHeight
as a quick/easy way to step back one ... just remember to set each of those AFTER
you test them; after you hit a preview size that's larger than screen size, just
break out of the loop.
Later,
--jim