How to create a custom layout for your camera in Android?

By | July 10, 2013

Hello everyone,

Today’s example shows how to create a custom layout for your camera preview, that is if you want a custom layout while your camera is opening.
This example helps you to achieve this.

First create a fresh project and name it CameraCustomLayout and copy this code to CameraCustomLayout.java file.

package com.coderzheaven.pack;

import java.io.IOException;
import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.graphics.PixelFormat;
import android.hardware.Camera;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.ViewGroup.LayoutParams;

public class CustomCameraActivity extends Activity implements SurfaceHolder.Callback {

	Camera camera;
	SurfaceView surfaceView;
	SurfaceHolder surfaceHolder;
	boolean previewing = false;
	LayoutInflater controlInflater = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

        getWindow().setFormat(PixelFormat.UNKNOWN);
        surfaceView = (SurfaceView)findViewById(R.id.camerapreview);
        surfaceHolder = surfaceView.getHolder();
        surfaceHolder.addCallback(this);
        surfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

        controlInflater = LayoutInflater.from(getBaseContext());
        View viewControl = controlInflater.inflate(R.layout.custom, null);
        LayoutParams layoutParamsControl = new LayoutParams(LayoutParams.FILL_PARENT,
        								   					LayoutParams.FILL_PARENT);
        this.addContentView(viewControl, layoutParamsControl);
    }

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
		if(previewing){
			camera.stopPreview();
			previewing = false;
		}

		if (camera != null){
			try {
				camera.setPreviewDisplay(surfaceHolder);
				camera.startPreview();
				previewing = true;
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		camera = Camera.open();
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {
		camera.stopPreview();
		camera.release();
		camera = null;
		previewing = false;
	}
}

After that create an xml file named custom.xml inside the res/layout folder and copy this code into it.
This is the layout which comes when you open the camera in your device.

<?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"
    android:gravity="left">

	<Button
		android:text="Click Me"
		android:id="@+id/Button01"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">
	</Button>
	<Button
		android:text="Click Me too"
		android:id="@+id/Button02"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">
	</Button>
</LinearLayout>

Now in the main.xml file copy this code.
This file contains the SurfaceView which holds the cameraPreview.

<?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"
    >
<SurfaceView
	android:id="@+id/camerapreview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
</LinearLayout>

Now you are done.
Note : Please run it on a real device, because camera will not work on the emulator.

You can download the source code from here.
PLease dont forget to comment on this post if you like it.

10 thoughts on “How to create a custom layout for your camera in Android?

  1. Moudud

    Thx for your post. It’s a nice post. But I have an error with this. In reverse landscape mode camera preview is upside down. Is there any solution for this?

    Reply
  2. Santi

    Thanks a lot. This post was exactly I was looking during 5 hours.
    It is very useful.

    Reply
  3. Pingback: Caused by: java.lang.reflect.InvocationTargetException - Abraham

    1. James Post author

      Navyasree, Can you please check the log and see if any error is being displayed?

      Reply
  4. Pingback: android - Comment puis-je créer un appareil personnalisé de mise en page pour Android?

  5. Pingback: android - ¿Cómo puedo crear una cámara personalizada de diseño para Android?

  6. Pingback: android - Come faccio a creare un custom layout fotocamera per Android?

  7. Pingback: Xamarin.Forms интересные ссылки — Vedmark

Leave a Reply

Your email address will not be published. Required fields are marked *