Curso Android: Trabajado con imgenes (cmara y

galera)
En el primer captulo del curso aprendimos a construir un lector de feeds simple; el
segundo captulo fue sobre UI en Android y aumentar la funcionalidad de un lector de
feeds; en el tercer captulo trabajaremos con el hardware de los telfonos y empezaremos
con el manejo de la cmara.

Mostrar una imagen de la cmara o de la galera

La aplicacin que realizaremos nos permitir mostrar una imagen, podemos obtenerla desde
la cmara o desde la galera del telfono. Queremos que al finalizar se vea as:

Con una imagen cargada se ver de la siguiente forma:

Disposicin inicial
Empezaremos descargando el cdigo que debe importarse hacia un proyecto nuevo.
Trabajaremos sobre un telfono con Android y cmara para desarrollar el ejemplo de este
artculo. Para el deployment hacia el telfono es necesario que el sistema operativo lo
reconozca y adems debe colocarse en el manifest como una propiedad de la etiqueta
<application> el valor android:debuggable="true".
La etiqueta debe lucir de la siguiente forma:
?
<application android:icon="@drawable/icon"

1android:label="@string/app_name" android:debuggable="true">
En la parte de diseo vamos a empezar con un RelativeLayout, el archivo
/res/layout/main.xmldebe estar as:
?
1 <!--?xml version="1.0" encoding="utf-8"?-->

Diseo

Trabajaremos con otra disposicin de elementos para el diseo llamado RelativeLayout y

agregaremos otros elementos de interfaz de usuario.

RelativeLayout: con este esquema los elementos se colocan en posicin relativa a

otros elementos o hacia el padre.

RadioButton: es un botn de dos estados (marcado y des-marcado) a diferencia del

CheckButton este no permite des-marcarlo y cuando se encuentra en grupo solo uno
de los botones del grupo puede estar marcado a la vez.

RadioGroup: permite agrupar un conjunto de RadioButtons para que solo uno a la

vez est seleccionado.

Nuestro diseo tendr un botn para adquirir la imagen un RadioGroup que contendr a 3
botones y un ImageView. Los 3 botones sern seleccionar de donde proviene la imagen ya
sea de la cmara (como vista previa o como imagen completa) o de la galera.
El cdigo completo del layout es el siguente:
?
1 <!--?xml version="1.0" encoding="utf-8"?-->
2 <button>
3 </button>
Hemos orientado el botn hacia la derecha y el RadioGroup hacia la izquierda. Luego el
ImageView abajo del RadioGroup.
El diseo de interfaces de usuario en ocasiones se vuelve complicado con eclipse por ello
utilizaremos la herramienta gratuita DroidDraw que permite exportar e importar archivos
XML para luego solo colocarlos en el archivo de diseo en eclipse, adems tiene
ejecutables para Windows, Linux y OS X.

Agregando cdigo para funcionalidad

Definimos 3 constantes, con dos de ellas vamos a identificar la accin realizada (tomar una
fotografa o bien seleccionarla de la galera) y con la otra estableceremos un nombre para el
archivo donde escribiremos la fotografa de tamao completo al tomarla.
?
1 private static int TAKE_PICTURE = 1;
2 private static int SELECT_PICTURE = 2;
3 private String name = "";
La forma ms sencilla de tomar fotografas es utilizar un intent con
ACTION_IMAGE_CAPTURE, accin que pertenece al Media Store y luego sobrecargar el
mtodo onActivityResult para realizar algo con el archivo recibido de la cmara.
Dentro del mtodo onCreate asignaremos a la variable de instancia name y luego vamos a
trabajar sobre la accin al click del botn. Este nombre, inicializado con una llamada a
getExternalStorageDirectory() guardar un archivo en la tarjeta SD del telfono y el
archivo se llamar test.jpg cada vez que grabemos una fotografa de tamao completo se
sobre escribe.
?
1
= Environment.getExternalStorageDirectory() + "/test.jpg";
2 name
Button btnAction = (Button)findViewById(R.id.btnPic);
3 btnAction.setOnClickListener(new OnClickListener() {
4 @Override
5 public void onClick(View v) {
6 ...
}
7}
8}
9
Primero obtenemos los botones de imagen completa y de galera para revisar su estatus ms
adelante. Luego construimos un intent que es necesario si accesamos la cmara con la
accin ACTION_IMAGE_CAPTURE, si accesamos la galera con la accin ACTION_PICK. En el
caso de la vista previa (thumbnail) no se necesita ms que el intent, el cdigo e iniciar la
Activity correspondiente. Por eso inicializamos las variables intent y code con los valores
necesarios para el caso del thumbnail as de ser el botn seleccionado no validamos nada en
un if.
?
1RadioButton rbtnFull = (RadioButton)findViewById(R.id.radbtnFull);
2RadioButton rbtnGallery = (RadioButton)findViewById(R.id.radbtnGall);
3Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);

Asignamos el cdigo a tomar fotografa, este cdigo junto al intent se utilizarn adelante
para iniciar la Activity.
?
1

int code = TAKE_PICTURE;

Si el chequeado es el botn de vista previa no necesitamos agregar nada ms. Si el

chequeado es el botn de imagen completa, adems del intent y cdigo agregamos un URI
para guardar all el resultado. Si el chequeado es el de la galera necesitamos un intent y
cdigo distintos que asignamos en la consecuencia del if.
?
1if (rbtnFull.isChecked()) {
2Uri output = Uri.fromFile(new File(name));
3intent.putExtra(MediaStore.EXTRA_OUTPUT, output);
} else if (rbtnGallery.isChecked()){
4intent = new Intent(Intent.ACTION_PICK,
5android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI);
6code = SELECT_PICTURE;
7}
Luego, con todo preparado iniciamos la Activity correspondiente.
?
1 startActivityForResult(intent, code);
Adems, es necesario sobrecargar la funcin onActivityResult para indicar que
queremos hacer con la imagen recibida (ya sea de la cmara o de la galera) una vez ha sido
seleccionada. Es necesario revisar si la imagen viene de la cmara TAKE_PICTURE o de la
galera SELECT_PICTURE.
?
1@Override protected void onActivityResult(int requestCode, int resultCode,
2Intent data) {
3if (requestCode == TAKE_PICTURE) {

4} else if (requestCode == SELECT_PICTURE){

5
6}
7}
Si viene de la cmara, verificamos si es una vista previa o una foto completa:
?
1
2
3
4

if (data != null) {

} else {

5
En el caso de una vista previa, obtenemos el extra data del intent y lo mostramos en el
ImageView:
?
1 if (data.hasExtra("data")) {
2 ImageView iv = (ImageView)findViewById(R.id.imgView);
3 iv.setImageBitmap((Bitmap) data.getParcelableExtra("data"));
4}
En el caso de una fotografa completa, a partir del nombre del archivo ya definido lo
buscamos y creamos el bitmap para el ImageView:
?
1 ImageView iv = (ImageView)findViewById(R.id.imgView);
2 iv.setImageBitmap(BitmapFactory.decodeFile(name));
Si quisiramos incluir esa imagen en nuestra galera, utilizamos un
MediaScannerConnectionClient.
?
0
1
0
2
0
3 new MediaScannerConnectionClient() {
0 private MediaScannerConnection msc = null; {
4 msc = new MediaScannerConnection(getApplicationContext(), this);
0 msc.connect();
5 }
public void onMediaScannerConnected() {
0 msc.scanFile(fileName, null);
6 }
0 public void onScanCompleted(String path, Uri uri) {
7 msc.disconnect();
0 }};
8
0
9
1
0
11
Si viene de la galera recibimos el URI de la imagen y construimos un Bitmap a partir de un
stream de bytes:

?
1
selectedImage = data.getData();
2 Uri
InputStream is;
3 try {
4 is = getContentResolver().openInputStream(selectedImage);
5 BufferedInputStream bis = new BufferedInputStream(is);
6 Bitmap bitmap = BitmapFactory.decodeStream(bis);
ImageView iv = (ImageView)findViewById(R.id.imgView);
7 iv.setImageBitmap(bitmap);
8 } catch (FileNotFoundException e) {}
9
Si estamos utilizando la cmara la vista ser de la siguiente forma:

Si estamos capturando de la galera ser as:

Descarga:
Puedes descargar el cdigo de la aplicacin completa y funcional en: Trabajado con
imgenes (cmara y galera).

Conclusin

RelativeLayout, RadioButton y RadioGroup: aprendimos cmo pueden

acomodarse componentes ubicndolos en el diseo con posiciones relativas con
respecto a otros componentes y tambin los controles necesarios para el manejo de
radio buttons y su agrupacin.

Utilizacin de intents para utilizar la cmara y accesar la galera: se utilizaron

intents para realizar acciones especficas, la existencia de intents para acciones

comunes predefinidas nos facilitan muchas tareas, en este caso no fue necesario
accesar directamente el hardware de la cmara si no pudimos tomar una fotografa
de una manera ms sencilla. Algo similar sucede con el acceso a la galera de fotos.

Utilizacin de la cmara de fotos: a travs de un ejemplo sencillo, aprendimos

como utilizar parte del hardware del telfono. A partir de aqu podemos trabajar los
imagnes guardadas y modificarlas o utilizarla para lo que nos interese.