Layout over a SurfaceView in Android

Question

I'm working with a ViewPager and I have two fragments. The first fragment is showing a CameraPreview. I want to include another layout above this Fragment but I only can add this layout to the activity (It shows the layout above two fragments and not only in the first fragment).

This is what I have. But the Button and the TextView are also showing in the another fragment of the parent Activity.

I'm using this code to add the overlay layout (R.layout.control)

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        autoFocusHandler = new Handler();
        mCamera = getCameraInstance();

        /* Instance barcode scanner */
        scanner = new ImageScanner();
        scanner.setConfig(0, Config.X_DENSITY, 3);
        scanner.setConfig(0, Config.Y_DENSITY, 3);

        mPreview = new CameraPreview(getActivity(), mCamera, previewCb, autoFocusCB);

        dialogProduct = new Dialog(getActivity(), R.style.DialogSlideAnim);
        dialogProduct.setContentView(R.layout.dialog_register);

    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_scan, container, false);

        FrameLayout preview = (FrameLayout) rootView.findViewById(R.id.cameraPreviewFrame);
        preview.addView(mPreview);

        scanText = (TextView) rootView.findViewById(R.id.scanText);

        scanButton = (Button) rootView.findViewById(R.id.ScanButton);

        scanButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (barcodeScanned) {
                    barcodeScanned = false;
                    scanText.setText("Scanning...");
                    mCamera.setPreviewCallback(previewCb);
                    mCamera.startPreview();
                    previewing = true;
                    mCamera.autoFocus(autoFocusCB);
                }
            }
        });

        //Add overlay layout
        View headerView = View.inflate(getActivity(), R.layout.control, null);
        LayoutParams layoutParamsControl = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        getActivity().addContentView(headerView,layoutParamsControl);

        return rootView;

    }

This is the fragment's layout

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

    <TextView
        android:id="@+id/totalText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/total_text"
        android:textSize="30sp" >
    </TextView>

    <FrameLayout
        android:id="@+id/cameraPreviewFrame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

    <TextView
        android:id="@+id/scanText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/escaneando" >
    </TextView>

    <Button
        android:id="@+id/ScanButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/btn_scan" />

</LinearLayout>

Questions

1. I have tried using the method addView() after add the mPreview (CameraPreview) but I got an error because I don't remove the previous view. ¿Is there a method like addContentView (which don't remove the previous view) in the Fragment Class?

2. ¿Do you have any other suggestion to solve this problem?

I'd really appreciate your help

Thank you

Answer 1

You cannot put a Layout on a SurfaceView. You can have a Layout and a SurfaceView be in the same layout/Activity

To achive what you want you need to create new Activity inside its layout add Surfaceview inside xml and another views you want to add ... like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
<Button
 android:id="@+id/dummy"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="a Button" />
<FrameLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
<com.exercise.AndroidMergeSurfaceView.MySurfaceView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>
</FrameLayout>
</LinearLayout>

Answer 2

I solved my problem with a modification of this example . I modify my CameraPreview view with a constructor that allow me to add an instance inside the FrameLayout (CameraPreview(Context,AttributeSet)). Then I just add another overlay view after the CameraPreview tag.Now I'm not using the addContentView method because I can get this view using findViewById from the parent layout. I hope this help somebody.

i) Fragment Layout

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

    <FrameLayout
        android:id="@+id/cameraPreviewFrame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <com.easyshopping.activities.CameraPreview
            android:id="@+id/cameraSurfaceView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </com.easyshopping.activities.CameraPreview>

        <Button
            android:id="@+id/btnTestSurface"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingTop="10dp"
            android:text="@string/test_button" />
    </FrameLayout>

    <TextView
        android:id="@+id/scanText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/escaneando" >
    </TextView>

    <Button
        android:id="@+id/ScanButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/btn_scan" />

</LinearLayout>

ii) OnCreateView() in the Fragment

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_scan, container, false);

        mPreview = (CameraPreview) rootView.findViewById(R.id.cameraSurfaceView);
        // Install a SurfaceHolder.Callback so we get notified when the
        // underlying surface is created and destroyed.
        mHolder = mPreview.getHolder();
        mHolder.addCallback(this);

        // deprecated setting, but required on Android versions prior to 3.0
        mHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

        // FrameLayout preview = (FrameLayout)
        // rootView.findViewById(R.id.cameraPreviewFrame);
        // preview.addView(mPreview);

        scanText = (TextView) rootView.findViewById(R.id.scanText);

        scanButton = (Button) rootView.findViewById(R.id.ScanButton);

        scanButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (barcodeScanned) {
                    barcodeScanned = false;
                    scanText.setText("Scanning...");
                    mCamera.setPreviewCallback(previewCb);
                    mCamera.startPreview();
                    previewing = true;
                    mCamera.autoFocus(autoFocusCB);
                }
            }
        });

        return rootView;
}