Rawal Hussain Khan Ali Rawal Hussain Khan Ali - 8 days ago 4
Android Question

How to draw rectangle on a camera preview in android

Actually I don't understand how to implement the rectangle on the camera preview. Everything working well, but I don't know the way to put the rectangle border like this link. Please anyone help me. Thanks.

package com.example.redsignal.eventbizz;
public class CameraActivity extends AppCompatActivity {

public static final String FRAGMENT_TAG = "camera";
private static final int REQUEST_CAMERA_PERMISSIONS = 931;
private static final int REQUEST_PREVIEW_CODE = 1001;
@Bind(R.id.settings_view)
CameraSettingsView settingsView;
@Bind(R.id.flash_switch_view)
FlashSwitchView flashSwitchView;
@Bind(R.id.front_back_camera_switcher)
CameraSwitchView cameraSwitchView;
@Bind(R.id.record_button)
RecordButton recordButton;
@Bind(R.id.cameraLayout)
View cameraLayout;
Button btn_orc, btn_qr;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_camera);
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
ButterKnife.bind(this);
btn_orc = (Button) findViewById(R.id.btn_orc);
btn_orc.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(CameraActivity.this, CameraActivity.class);
startActivity(intent);
TastyToast.makeText(CameraActivity.this, "BCR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
finish();
}
});
btn_qr = (Button) findViewById(R.id.btn_qr);
btn_qr = (Button) findViewById(R.id.btn_qr);
btn_qr.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(CameraActivity.this, QRCameraActivity.class);
startActivity(intent);
TastyToast.makeText(CameraActivity.this, "QR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
finish();
}
});
if (Build.VERSION.SDK_INT > 15) {
final String[] permissions = {
Manifest.permission.CAMERA,
Manifest.permission.RECORD_AUDIO,
Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE};

final List<String> permissionsToRequest = new ArrayList<>();
for (String permission : permissions) {
if (ActivityCompat.checkSelfPermission(this, permission) != PackageManager.PERMISSION_GRANTED) {
permissionsToRequest.add(permission);
}
}
if (!permissionsToRequest.isEmpty()) {
ActivityCompat.requestPermissions(this, permissionsToRequest.toArray(new String[permissionsToRequest.size()]), REQUEST_CAMERA_PERMISSIONS);
} else addCamera();
} else {
addCamera();
}
}


@OnClick(R.id.flash_switch_view)
public void onFlashSwitcClicked() {
final CameraFragmentApi cameraFragment = getCameraFragment();
if (cameraFragment != null) {
cameraFragment.toggleFlashMode();
}
}

@OnClick(R.id.front_back_camera_switcher)
public void onSwitchCameraClicked() {
final CameraFragmentApi cameraFragment = getCameraFragment();
if (cameraFragment != null) {
cameraFragment.switchCameraTypeFrontBack();
}
}

@OnClick(R.id.record_button)
public void onRecordButtonClicked() {
final CameraFragmentApi cameraFragment = getCameraFragment();
if (cameraFragment != null) {
cameraFragment.takePhotoOrCaptureVideo(new CameraFragmentResultAdapter() {

@Override
public void onPhotoTaken(byte[] bytes, String filePath) {
Toast.makeText(getBaseContext(), "onPhotoTaken " + filePath, Toast.LENGTH_SHORT).show();
}
},
"/storage/self/primary",
"photo0");
}
}

@OnClick(R.id.settings_view)
public void onSettingsClicked() {
final CameraFragmentApi cameraFragment = getCameraFragment();
if (cameraFragment != null) {
cameraFragment.openSettingDialog();
}
}



@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
if (grantResults.length != 0) {
addCamera();
}
}

@RequiresPermission(Manifest.permission.CAMERA)
public void addCamera() {
cameraLayout.setVisibility(View.GONE);
cameraLayout.setVisibility(View.VISIBLE);

final CameraFragment cameraFragment = CameraFragment.newInstance(new Configuration.Builder()
.setCamera(Configuration.CAMERA_FACE_REAR).build());
getSupportFragmentManager().beginTransaction()
.replace(R.id.content, cameraFragment, FRAGMENT_TAG)
.commitAllowingStateLoss();

if (cameraFragment != null) {


cameraFragment.setStateListener(new CameraFragmentStateAdapter() {

@Override
public void onCurrentCameraBack() {
cameraSwitchView.displayBackCamera();
}

@Override
public void onCurrentCameraFront() {
cameraSwitchView.displayFrontCamera();
}

@Override
public void onFlashAuto() {
flashSwitchView.displayFlashAuto();
}

@Override
public void onFlashOn() {
flashSwitchView.displayFlashOn();
}

@Override
public void onFlashOff() {
flashSwitchView.displayFlashOff();
}



@Override
public void shouldRotateControls(int degrees) {
ViewCompat.setRotation(cameraSwitchView, degrees);
ViewCompat.setRotation(flashSwitchView, degrees);
}

@Override
public void onRecordStatePhoto() {
recordButton.displayPhotoState();
}

});

cameraFragment.setControlsListener(new CameraFragmentControlsAdapter() {
@Override
public void lockControls() {
cameraSwitchView.setEnabled(false);
recordButton.setEnabled(false);
settingsView.setEnabled(false);
flashSwitchView.setEnabled(false);
}

@Override
public void unLockControls() {
cameraSwitchView.setEnabled(true);
recordButton.setEnabled(true);
settingsView.setEnabled(true);
flashSwitchView.setEnabled(true);
}

@Override
public void allowCameraSwitching(boolean allow) {
cameraSwitchView.setVisibility(allow ? View.VISIBLE : View.GONE);
}

@Override
public void allowRecord(boolean allow) {
recordButton.setEnabled(allow);
}

});

}
}

private CameraFragmentApi getCameraFragment() {
return (CameraFragmentApi) getSupportFragmentManager().findFragmentByTag(FRAGMENT_TAG);
}




<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>


<RelativeLayout
android:id="@+id/cameraLayout"
android:visibility="gone"
tools:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingTop="10dp">

<com.github.florent37.camerafragment.widgets.CameraSettingsView
android:id="@+id/settings_view"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
tools:ignore="RtlHardcoded" />

<com.github.florent37.camerafragment.widgets.FlashSwitchView
android:id="@+id/flash_switch_view"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true" />

<com.github.florent37.camerafragment.widgets.CameraSwitchView
android:id="@+id/front_back_camera_switcher"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
tools:ignore="RtlHardcoded" />

</RelativeLayout>

<!--android:background="#82000000"-->
<RelativeLayout
android:id="@+id/record_panel"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/transparent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">

<com.github.florent37.camerafragment.widgets.RecordButton
android:id="@+id/record_button"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp" />
<Button
android:id="@+id/btn_qr"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="30dp"
android:layout_toLeftOf="@+id/btn_orc"
android:layout_toStartOf="@+id/btn_orc"
android:background="@drawable/qr_scan" />

<Button
android:id="@+id/btn_orc"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="7dp"
android:layout_marginRight="5dp"
android:layout_alignTop="@+id/btn_qr"
android:background="@drawable/bcr_scan"
tools:ignore="RtlHardcoded" />

</RelativeLayout>

</RelativeLayout>

</FrameLayout>




Answer

To acchieve this you can just put your camera preview into a FrameLayout and place a transparent View with this rect inside above the camera preview.

First we are going to create the rectangle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
            android:width="1dp"
            android:color="@color/white"
            android:dashGap="8dp"
            android:dashWidth="8dp" />

    <corners android:radius="8dp" />

Then you can put this view over your preview:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!-- this is your preview - whatever it looks like -->
        <View   
            android:layout_width="match_parent"
            android:layout_height="match_parent" />   

         <!-- overlay - customize padding and stuff  -->
         <View   
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            padding="32dp"
            android:background="@drawable/your_shape" />  
</FrameLayout>

EDIT:

after taking a look at your layout the task can be solved by just placing htis view:

     <View
        padding="32dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/record_panel"
        android:layout_alignParentTop="true"
        android:background="@drawable/your_shape" />

as last item of the layout with the id cameraLayout