So, I need to overlay the camera2 preview and draw a rectangle on the preview video image by layering a transparent overlay on top. I started with a basic Camera2 code here: https://github.com/googlesamples/android-Camera2Basic
the above use TextureView for camera preview.
Next, I added the following class to project
private class CustomView extends SurfaceView {
private final Paint paint;
private final SurfaceHolder mHolder;
private final Context context;
public CustomView(Camera2BasicFragment context) {
super(context.getActivity().getBaseContext());
mHolder = getHolder();
mHolder.setFormat(PixelFormat.TRANSPARENT);
this.context = context.getActivity().getBaseContext();
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
invalidate();
if (mHolder.getSurface().isValid()) {
final Canvas canvas = mHolder.lockCanvas();
Log.d("touch", "touchRecieved by camera");
if (canvas != null) {
Log.d("touch", "touchRecieved CANVAS STILL Not Null");
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
canvas.drawColor(Color.TRANSPARENT);
canvas.drawCircle(event.getX(), event.getY(), 100, paint);
mHolder.unlockCanvasAndPost(canvas);
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
Canvas canvas1 = mHolder.lockCanvas();
if(canvas1 !=null){
canvas1.drawColor(0, PorterDuff.Mode.CLEAR);
mHolder.unlockCanvasAndPost(canvas1);
}
}
}, 1000);
}
mHolder.unlockCanvasAndPost(canvas);
}
}
return false;
}
}
I need some help in making this work.. Obviously the new class is not used yet. I also need to update the overlay xml to add a second transparent TextureView on top of the camera preview one. Here is my original layout:
Would be very appreciated if anyone can tell me how to make the new class work, and tell me what to add to the layout.
here is fragment_camera2_basic.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.camera2basic.AutoFitTextureView
android:id="#+id/texture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<FrameLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#color/control_background">
<Button
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/picture" />
<ImageButton
android:id="#+id/info"
android:contentDescription="#string/description_info"
style="#android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:padding="20dp"
android:src="#drawable/ic_action_info" />
</FrameLayout>
</RelativeLayout>
and activity_camera.xml
<?xml version="1.0" encoding="utf-8"?><!--
-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="com.example.android.camera2basic.CameraActivity" />
Add
<LinearLayout
android:id="#+id/surface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
Within the fragment. I've added a RelativeLayout around AutoFitTextureView and FrameLayout, but not sure if that is needed.
Change onCreateView to
View view = inflater.inflate(R.layout.fragment_camera2_basic, container, false);
LinearLayout surface = (LinearLayout)view.findViewById(R.id.surface);
surface.addView(new CustomView(this));
return view;
In my app I have created a custom camera app ,using FrameLayout in Xml. And I have a capture button to capture images,and two other buttons. These buttons are arranged inside a RelativeLayout inside FrameLayout.But it is not displaying when running my App. Any solution for this problem. Can anybody help?
XML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/buttonLoadPicture2"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="6dp"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<ImageButton
android:id="#+id/button_capture"
android:layout_width="90dip"
android:layout_height="50dip"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/buttonLoadPicture2"
android:layout_alignParentBottom="true"
android:src="#drawable/camera"
android:layout_marginRight="5dp"
/>
<Button android:id="#+id/buttonLoadPicture3"
android:layout_width="90dip"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_gravity="end"
android:layout_toRightOf="#+id/button_capture"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="0dp"
android:text="Cancel"
></Button>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
JAVA CODE
public class CameraActivity extends Activity {
private Camera mCamera;
private CameraPreview mPreview;
public static final int MEDIA_TYPE_IMAGE = 1;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_camera);
ImageButton captureButton = (ImageButton) findViewById(R.id.button_capture);
System.out.println("Starting!");
// Create an instance of Camera
mCamera = getCameraInstance();
// Create our Preview view and set it as the content of our activity.
mPreview = new CameraPreview(this, mCamera);
FrameLayout preview = (FrameLayout) findViewById(R.id.camera_preview);
preview.addView(mPreview);
final Camera.PictureCallback mPicture = new Camera.PictureCallback() {
public void onPictureTaken(byte[] data, Camera camera) {
File pictureFile = getOutputMediaFile(MEDIA_TYPE_IMAGE);
if (pictureFile == null){
return;
}
try {
FileOutputStream fos = new FileOutputStream(pictureFile);
fos.write(data);
fos.close();
MediaStore.Images.Media.insertImage(getContentResolver(), pictureFile.getAbsolutePath(), pictureFile.getName(), pictureFile.getName());
} catch (FileNotFoundException e) {
} catch (IOException e) {
}
}
};
// Add a listener to the Capture button
captureButton.setOnClickListener(
new View.OnClickListener() {
public void onClick(View v) {
// get an image from the camera
System.out.println("Photo Taking!");
mCamera.takePicture(null, null, mPicture);
}
}
);
}
/** A safe way to get an instance of the Camera object. */
public static Camera getCameraInstance(){
Camera c = null;
try {
c = Camera.open(); // attempt to get a Camera instance
}
catch (Exception e){
// Camera is not available (in use or does not exist)
}
return c; // returns null if camera is unavailable
}
#Override
protected void onPause() {
super.onPause();
releaseCamera(); // release the camera immediately on pause event
}
private void releaseCamera(){
if (mCamera != null){
mCamera.release(); // release the camera for other applications
mCamera = null;
}
}
/** Create a File for saving an image or video */
private File getOutputMediaFile(int type){
// To be safe, you should check that the SDCard is mounted
// using Environment.getExternalStorageState() before doing this.
File mediaStorageDir = new File(Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_PICTURES), "MyCameraApp");
// This location works best if you want the created images to be shared
// between applications and persist after your app has been uninstalled.
// Create the storage directory if it does not exist
if (! mediaStorageDir.exists()){
if (! mediaStorageDir.mkdirs()){
return null;
}
}
// Create a media file name
String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
File mediaFile;
if (type == MEDIA_TYPE_IMAGE){
mediaFile = new File(mediaStorageDir.getPath() + File.separator +
"IMG_"+ timeStamp + ".jpg");
} else {
return null;
}
return mediaFile;
}
}
Your FrameLayout covers the entire screen and you are adding your camera preview to it which will be added on top of the buttons and therefore cover them. A quick fix would be move all your buttons out of the frame layout so your layout looks like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/buttonLoadPicture2"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="6dp"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<ImageButton
android:id="#+id/button_capture"
android:layout_width="90dip"
android:layout_height="50dip"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/buttonLoadPicture2"
android:layout_alignParentBottom="true"
android:src="#android:drawable/ic_menu_camera"
android:layout_marginRight="5dp"/>
<Button android:id="#+id/buttonLoadPicture3"
android:layout_width="90dip"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_gravity="end"
android:layout_toRightOf="#+id/button_capture"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="0dp"
android:text="Cancel"
></Button>
</RelativeLayout>
</LinearLayout>
Note that the above will keep your camera preview above the relative layout containing the buttons. So if you are trying to have the buttons on top your preview you can retain your old code/layout and use brintToFront()
I want to put a customise layout to scan bar code using Zbar.
The problem:
As you can see the camera is not taking the entire frame layout.It is taking the width,but not the height.Why this is happening??
Code:
qrscannerzbarlayout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/zbar_layout_area"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello"
/>
</LinearLayout>
<FrameLayout
android:id="#+id/frmQr"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/ll_footerx"
android:layout_below="#+id/zbar_layout_area"
android:layout_centerHorizontal="true" >
</FrameLayout>
<RelativeLayout
android:id="#+id/ll_footerx"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp" >
<TextView
android:id="#+id/tv_line123"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Place barcode in screen view and hold steady"
android:textSize="14sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_back"
android:layout_width="100dp"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_below="#id/tv_line123"
android:layout_marginLeft="40dp"
android:layout_marginTop="15dp"
android:background="#drawable/trailsky"
android:text="WONT SCAN" />
<Button
android:id="#+id/button_nobarcode"
android:layout_width="100dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:layout_below="#id/tv_line123"
android:layout_marginRight="40dp"
android:layout_marginTop="15dp"
android:background="#drawable/passyellow"
android:text="NO BARCODE" />
</RelativeLayout>
</RelativeLayout>
The linear layout is used to place a header,frame layout to put the camera preview and the relative layout to put the footer.
Here is the java code:(I am just copying a part of it)
public class ZBarScannerActivity extends Activity implements Camera.PreviewCallback, ZBarConstants{
Button btnnobarcode;
#SuppressWarnings("unused")
private static final String TAG = "ZBarScannerActivity";
private CameraPreview mPreview;
private Camera mCamera;
private ImageScanner mScanner;
private Handler mAutoFocusHandler;
private boolean mPreviewing = true;
static {
System.loadLibrary("iconv");
}
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
if(!isCameraAvailable()) {
// Cancel request if there is no rear-facing camera.
cancelRequest();
return;
}
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.qrscannerzbar_layout);
btnnobarcode=(Button)findViewById(R.id.button_nobarcode);
btnnobarcode.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent i = new Intent(ZBarScannerActivity.this,AddCardDetails.class);
i.putExtra("result","");
startActivity(i);
finish();
}
});
mAutoFocusHandler = new Handler();
// Create and configure the ImageScanner;
setupScanner();
// Create a RelativeLayout container that will hold a SurfaceView,
// and set it as the content of our activity.
mPreview = new CameraPreview(this, this, autoFocusCB);
//setContentView(mPreview);
FrameLayout zbarLayout = ( FrameLayout) findViewById(R.id.frmQr);
mPreview.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
zbarLayout.addView(mPreview);
}
I’m trying to creating a layout that contains a "SurfaceView" at the top with a horizontal toolbar that is section into 3 segments in the bottom, however my SurfaceView which contains camera preview is only the only element that is showing. Please point out the error in my layout xml or provide me the similar layout xml, Thanks.
Below is my layout & updates based on user recommendations
Attempt # 1 (RelativeLayout as root):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LayoutForPreview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:screenOrientation="portrait" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayoutToolbar"
android:layout_gravity="top"
android:scaleType="fitXY" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
Below is my desired GUI look:
Attempt #1 Result , device snapshot , which only shows the SurfaceView:
Snapshot of eclipse GUI tool, which shows what the layout should look like.
Attempt # 2 (LinearLayout as root):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LayoutForPreview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:screenOrientation="portrait" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:scaleType="fitXY"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
Attempt #2 , Result , Device snapshot :
Issues:
1) Toolbar appears on top rather than on bottom
2) Camera preview freezes & app crashes. For some reason LinearLayout causes the Camera error 1001 , and I think its related to preview sizes.
Attempt #3 (Add toolbar programmatically to either Relative or Linear layout in activity onCreate).
LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LayoutForPreview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:screenOrientation="portrait" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:scaleType="fitXY"
android:layout_weight="1" />
</LinearLayout>
Toolbar defined in separate XML added later via Java code:
<?xml version="1.0" encoding="UTF-8"?>
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally , layout_below="#+id/BarcodeScannerFrame-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
onCreate,onResume,other relevant code snippets of my activity only, the LinearLayout toolbar is added to Linear or Relative layout at runtime:
//import not included
public class ScanVinFromBarcodeActivity extends Activity {
// camera object that is used globally in this activity and also passed
// reference to PreviewSurface inner class
private Camera globalCamera;
private int cameraId = 0;
// bitmap that would created after picture is taken and converted from
// camera bytes
private Bitmap bmpOfTheImageFromCamera = null;
// global flag whether a camera has been detected
private boolean isThereACamera = false;
// layout for this activity
private LinearLayout RelativeLayoutBarcodeScanner= null;
// CameraPreview extends SurfaceView displays preview of images from the
// Camera
private CameraPreview newCameraPreview = null;
// used to inflate the xml layout
private SurfaceView surfaceViewBarcodeScanner = null;
private boolean cameraPreviewing = false;
// this continueToAutomaticallyDecode flag is initially set to TRUE, but
// will be set to FALSE on the first successful decode OR when a crucial
// method in the code process fails or throws an exception
private volatile boolean continueToAutomaticallyDecode = true;
// global flag used to indicate picture taking & decoding is in progress
private volatile boolean takingPictureAndDecodeInprogress = false;
// Bitmap options for bitmap creation from camera picture
BitmapFactory.Options options = null;
// used for samsung galaxy s devices only
private Matrix rotationMatrix90CounterClockWise = null;
// Reader is class from zxing used to decode barcodes
Reader reader = null;
// DecodeHintType hashtable is used to provide help to the zxing Reader
// class
Hashtable<DecodeHintType, Object> decodeHints = null;
//
private boolean onTouchEvent = true;
//
private OrientationEventListener orientationEventListener = null;
// 1 means the screen is PORTRAIT and 2 means screen is LANDSCAPE
private int latestScreenOrientation = 1;
//
Camera.Parameters Flash = null;
//
private String globalVIN = null;
//
private Handler handler = null;
//
private LinearLayout barcodeVinScannerToolbar = null;
public boolean isContinueToAutomaticallyDecode() {
return continueToAutomaticallyDecode;
}
public void setContinueToAutomaticallyDecode(
boolean continueToAutomaticallyDecode) {
this.continueToAutomaticallyDecode = continueToAutomaticallyDecode;
}
public boolean isTakingPictureAndDecodeInprogress() {
return takingPictureAndDecodeInprogress;
}
public void setTakingPictureAndDecodeInprogress(
boolean takingPictureAndDecodeInprogress) {
this.takingPictureAndDecodeInprogress = takingPictureAndDecodeInprogress;
}
/*
* This method , finds FEATURE_CAMERA, opens the camera, set parameters ,
* add CameraPreview to layout, set camera surface holder, start preview
*/
#SuppressLint("InlinedApi")
private void initializeGlobalCamera() {
try {
if (!getPackageManager().hasSystemFeature(
PackageManager.FEATURE_CAMERA)) {
Toast.makeText(this, "No camera on this device",
Toast.LENGTH_LONG).show();
} else { // check for front camera ,and get the ID
cameraId = findFrontFacingCamera();
if (cameraId < 0) {
Toast.makeText(this, "No front facing camera found.",
Toast.LENGTH_LONG).show();
} else {
Log.d("ClassScanViewBarcodeActivity",
"camera was found , ID: " + cameraId);
// camera was found , set global camera flag to true
isThereACamera = true;
// OPEN
globalCamera = getGlobalCamera(cameraId);
// parameters auto focus
globalCamera.getParameters().setFocusMode(
Camera.Parameters.FOCUS_MODE_CONTINUOUS_PICTURE);
// set picture format to JPEG, everytime makesure JPEg
globalCamera.getParameters().setPictureFormat(
ImageFormat.JPEG);
autoFocusSetupForBarcode(globalCamera);
/*
* START early setup variables & setting used in
* jpegCallback in order to optimize the jpegCallback code
*/
options = new BitmapFactory.Options();
// option set for down sampling he captured image taken from
// the camera in order to MemoryOutOfBounds exception
options.inSampleSize = 4;
// image quality rather than speed in order to achieve early
// barcode detection & decode
options.inPreferQualityOverSpeed = false;
// Samsung galaxy S only , rotate to correct orientation
// ,and capture only the image within the guidance rectangle
rotationMatrix90CounterClockWise = new Matrix();
rotationMatrix90CounterClockWise.postRotate(90);
// early variable used by zxing to decode method
decodeHints = new Hashtable<DecodeHintType, Object>();
decodeHints.put(DecodeHintType.TRY_HARDER, Boolean.TRUE);
decodeHints.put(DecodeHintType.PURE_BARCODE, Boolean.TRUE);
decodeHints.put(DecodeHintType.ASSUME_CODE_39_CHECK_DIGIT,
Boolean.TRUE);
reader = new MultiFormatReader();
turnOnFlashlight(globalCamera);
// pass surfaceView to CameraPreview
newCameraPreview = new CameraPreview(this, globalCamera) {
#Override
public boolean onTouchEvent(MotionEvent event) {
Log.d("ClassScanViewBarcodeActivity",
" onTouchEvent(MotionEvent event) ");
onTouchEvent = true;
globalCamera
.autoFocus(autoFocusCallbackForAutomaticScan);
return super.onTouchEvent(event);
}
};
// pass CameraPreview to Layout
RelativeLayoutBarcodeScanner.addView(newCameraPreview);
// give reference SurfaceView to camera object
globalCamera.setPreviewDisplay(surfaceViewBarcodeScanner
.getHolder());
// PREVIEW
if (cameraPreviewing != true) {
globalCamera.startPreview();
}
Log.d("ClassScanViewBarcodeActivity",
"camera opened & previewing");
}
}// end else ,check for front camera
}// end try
catch (Exception exc) {
// in case of exception release resources & cleanup
if (globalCamera != null) {
globalCamera.stopPreview();
cameraPreviewing = false;
globalCamera.setPreviewCallback(null);
globalCamera.release();
globalCamera = null;
options = null;
rotationMatrix90CounterClockWise = null;
reader = null;
}
Log.d("ClassScanViewBarcodeActivity initializeGlobalCamera() exception:",
exc.getMessage());
exc.printStackTrace();
}// end catch
}// end ini
/* this method detect whether the camera flashlight a.k.a torch feature is available to be turned on then turns on the light*/
public void turnOnFlashlight(Camera camera) {
Log.d("ClassScanViewBarcodeActivity",
"turnOnFlashlight(Camera camera )");
boolean flag = false;
Context context = null;
if (camera != null) {
Log.d("ClassScanViewBarcodeActivity",
"turnOnFlashlight() , FEATURE_CAMERA_FLASH: " + flag);
context = RelativeLayoutBarcodeScanner.getContext();
if (context != null) {
flag = context.getPackageManager().hasSystemFeature(
PackageManager.FEATURE_CAMERA_FLASH);
if (flag) {
Flash = camera.getParameters();
Flash.setFlashMode("torch");
camera.setParameters(Flash);
}// end if camera feature is available
else {
Log.d("ClassScanViewBarcodeActivity",
"turnOnFlashlight() , FEATURE_CAMERA_FLASH: "
+ flag);
}
}// end if context not null
}// end camera not null
}// end turnOnFlashlight(Camera camera )
// onCreate, instantiates layouts & surfaceView used for video preview
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_barcode_vin_scanner);
Log.d("ClassScanViewBarcodeActivity", "onCreate ");
// create surfaceView for previewing of camera image
RelativeLayoutBarcodeScanner = (LinearLayout) findViewById(R.id.LayoutForPreview);
surfaceViewBarcodeScanner = (SurfaceView) findViewById(R.id.surfaceViewBarcodeScanner);
barcodeVinScannerToolbar = (LinearLayout) findViewById(R.id.linearLayoutToolbar);
initializeGlobalCamera();
//*****TOOLBAR IS ADDED*****
if (RelativeLayoutBarcodeScanner!=null && barcodeVinScannerToolbar!=null)
{
//surfaceViewBarcodeScanner.addChildrenForAccessibility(list);
RelativeLayoutBarcodeScanner.addView(barcodeVinScannerToolbar);
}
// instantiate orientationEventListener
orientationEventListener = new OrientationEventListener(this,
SensorManager.SENSOR_DELAY_NORMAL) {
#Override
public void onOrientationChanged(int arg0) {
/*
latestScreenOrientation = ScreenUtility
.getScreenOrientation(RelativeLayoutBarcodeScanner.getContext());
Log.d("ClassScanViewBarcodeActivity",
"latestScreenOrientation: " + latestScreenOrientation);
if (orientationEventListener.canDetectOrientation()) {
orientationEventListener.enable();
Log.d("ClassScanViewBarcodeActivity",
"enabled orientationEventListener: "
+ String.valueOf(orientationEventListener
.canDetectOrientation()));
} else {
Log.d("ClassScanViewBarcodeActivity",
"enabled orientationEventListener: "
+ String.valueOf(orientationEventListener
.canDetectOrientation()));
}
*/
}
};
handler = new Handler();
}// end onCreate
#Override
protected void onResume() {
Log.d("ClassScanViewBarcodeActivity, onResume() globalCamera:",
String.valueOf(globalCamera));
initializeGlobalCamera();
//*****TOOLBAR IS ADDED*****
if (RelativeLayoutBarcodeScanner!=null && barcodeVinScannerToolbar!=null)
{
//surfaceViewBarcodeScanner.addChildrenForAccessibility(list);
RelativeLayoutBarcodeScanner.addView(barcodeVinScannerToolbar);
}
if (orientationEventListener != null) {
orientationEventListener.enable();
}
super.onResume();
}
#Override
protected void onStop() {
if (globalCamera != null) {
globalCamera.stopPreview();
cameraPreviewing = false;
globalCamera.setPreviewCallback(null);
globalCamera.release();
globalCamera = null;
}
if (orientationEventListener != null) {
orientationEventListener.disable();
}
super.onStop();
}
#Override
protected void onPause() {
if (globalCamera != null) {
globalCamera.stopPreview();
cameraPreviewing = false;
globalCamera.setPreviewCallback(null);
globalCamera.release();
globalCamera = null;
options = null;
rotationMatrix90CounterClockWise = null;
reader = null;
}
if (orientationEventListener != null) {
orientationEventListener.disable();
}
super.onPause();
}// end onPause()
//other irrelevant code was not included
}//end activity
Attempt #3, result, screen freezes , no particular error or exception reported:
Error log:
**If the eclipse GUI tool shows the desired look , than why is the toolbar still missing??? I would like to have the toolbar in the bottom , preferably using RelativeLayout without any crashes or screen freezes. Any help will be appreciated.
I'm using Samsung Galaxy S3 for testing.
Thanks.**
You wanted something like this?
the layout I used is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayoutToolbar"
/>
</RelativeLayout>
Please note that, since I didn't have your images in my res/drawable folder, I replaced them with ic_launcher.
Also note that I used an ldpi device running Froyo (API level 2.2). This is why the image is smaller than yours and the UI differs slighthly (...). Anyway, it works at every resolution and with every os version.
Add this to your LinearLayout containing imageView
android:layout_alignParentBottom="true"
What you really want is not to use a Relativelayout but instead use a Linearlayout as your root. Then set the surfaceview weight to 1, something like:
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
You forgot to tell the surfaceView to be above the linearLayout. Your code will need to look similar to this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayoutToolbar" />
</RelativeLayout>
Why do you use RelativeLayout as a root layout, I think it is much simplier to use LinearLayou with layout_weight parameter in one of children view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SurfaceView
android:layout_weight="1"
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="0dp" />
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally -->
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
try changing the layout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LayoutForPreview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:screenOrientation="portrait" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="top"
android:scaleType="fitXY"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".1"
android:orientation="horizontal"
android:layout_gravity="bottom" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
I see a few mistakes in your initial XML
1. In the surfaceview you use:
android:layout_above="#+id/linearLayoutToolbar"
You should use #+id when you create an Id but when you want to make a reference you should only do #id like this:
android:layout_above="#id/linearLayoutToolbar"
2. You can't do a reference to another object that isn't created yet! So you should put the surfaceview below de linearlayout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LayoutForPreview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:screenOrientation="portrait" >
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayoutToolbar"
android:layout_gravity="top"
android:scaleType="fitXY" />
</RelativeLayout>
3. You should add weight to your 3 ImageViews like this:
android:layout_weight="1"
Some small changes in your initial layout will lead to remove the error. You need to use android:layout_height="0dp" , defining 0dp will help your surfaceview to fit in your screen.
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#+id/linearLayoutToolbar"
/>
And I've not found use of below attribute in SurfaceView.
android:layout_gravity="top"
android:scaleType="fitXY"
Checkout this layout designs, how android:layout_height="0dp" works, and how android:layout_width="0dp" works.
I have used that kind of layouts in many apps, and here is how should be your layout. No tricks, no praying for luck, this is just the clean, happy, and always-working way to achieve it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:screenOrientation="portrait" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayoutToolbar"
android:layout_alignParentTop="true" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.68"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
here you have a preview on one of my apps.
The posted code is adapted to yours so a copy/paste will do it. please note that its everything in a simple file, so you have to change slightly your activity
I have problem with my qrreader.
I need scan only on center screen.
I need square where I have to put qr code before code is scaning.
I try added margin in FrameLayout, but I have blck screen on frame..
It is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/cameraPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
>
</FrameLayout>
<TextView
android:id="#+id/scanText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Scanning..."
android:layout_marginTop="20dp"
android:textColor="#android:color/white"
android:textSize="21sp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/prv" />
<Button
android:id="#+id/ScanButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:visibility="invisible"
android:text="Scan" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button"
android:onClick="turnFlash"
/>
</RelativeLayout>
And my code to scan:
PreviewCallback previewCb = new PreviewCallback() {
public void onPreviewFrame(byte[] data, Camera camera) {
Camera.Parameters parameters = camera.getParameters();
Size size = parameters.getPreviewSize();
Image barcode = new Image(size.width, size.height, "Y800");
barcode.setData(data);
int result = scanner.scanImage(barcode);
if (result != 0 && !is_checking) {
is_checking = true;
String text="";
SymbolSet syms = scanner.getResults();
for (Symbol sym : syms) {
text = sym.getData();
}
if(text.substring(0, 3).matches("htt|www")){
previewing = false;
mCamera.setPreviewCallback(null);
mCamera.stopPreview();
scanText.setText(text);
v.vibrate(500);
try{
if(text.substring(0, 3).equalsIgnoreCase("www")){
scanText.setText("http://"+scanText.getText().toString());
}
startWebsite(scanText.getText().toString());
}catch(Exception e){
}
}
is_checking = false;
}
}
};
I am using Zbar libary.
Take a look at my app JustScan (can be found at code.google.com as eclipse project), where I used same sample code as you did and modified it as you need.
The idea is to override the method draw(Canvas canvas) of the CameraPreview-class, where you can draw your rectangle for the scan area. To ensure that your overridden method is called you have to call a setWillNotDraw(false) in dhe method surfaceCreated(...).
To crop the preview to your scan area crop the barcode image by using image method setCrop(...) before you pass it to scanImage() in the method onPreviewFrame(...) in the previewCallback function.
Sorry for this very short explanation, but I can't list the complete code here. Hope it helps anyway...