Create tap to capture transparent ImageButton over CameraPreview

Question

Been banging my head off the wall with this for a while. Basically my application shows a camera preview that fills the screen and when the user taps on the preview it captures an image (trying to do this through a transparent imagebutton. At the bottom of the screen I would like another image button, this time it will stop the recording the application is doing.

Here is my activity layout

<?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" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

        <ImageButton
            android:id="@+id/button_capture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:contentDescription="@string/capture"
            android:src="@null" />
    </FrameLayout>

    <ImageButton
        android:id="@+id/stopRecording"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="50dp"
        android:background="@null"
        android:contentDescription="@string/stopRec"
        android:onClick="moveToUpload"
        android:scaleType="fitCenter"
        android:src="@drawable/rec_gray" />

</FrameLayout>

I was trying to use FrameLayouts as they allow overlaying.

The only non changable thing is the CameraPreview HAS to be a FrameLayout.

Any help appreciated correcting this code,

Thanks.

score 1 · Accepted Answer · answered Feb 25 '14 at 13:11

If you want to add button ON the preview use separate layouts and merge them in main layout

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


    <include
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        layout="@layout/layout2" />

    <include
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         layout="@layout/layout1" />
</merge>

One layout wil contain only preview and second will contain buttons, after merging you will have buttons placed on preview.

If you want to use transparent button, use png file with alpha chanel, that do the trick:)

score 0 · Answer 2 · edited May 23 '17 at 11:50

You need to add Cameraview in your xml like this here

<FrameLayout 
  android:id="@+id/mySurfaceView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <com.cam.CapturePreview 
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  </com.cam.CapturePreview>

  </FrameLayout>

Also this will help you.. https://stackoverflow.com/a/7528543/472336

Create tap to capture transparent ImageButton over CameraPreview

2 Answers2