Taller 5 Fragmentos Parte 1

Profesor: Arles Rodrguez

Objetivo: Hacer que la aplicacin sea interactiva requiere que se adapte a los distintos dispositivos
mviles. Para lograr que se adapte a uno de los cambios ms significativos que es como se ve la
aplicacin se utilizan fragmentos (fragments).

1 PROCEDIMIENTO
De forma individual seguir las instrucciones del laboratorio1 y leer pues contiene contenido que
permitir aprender a manejar Fragmentos fcilmente.
Una de las ventajas sobre el desarrollo en Android es que se puede crear exactamente la misma
aplicacin en dispositivos totalmente diferentes. Esto no quiere decir que se requiera que la aplicacin
luzca igual en los diferentes dispositivos.

Imagen tomada del libro Head First Android Development Cap 7. Fragments.

Se asume que si el taller es individual los pantallazos deben ser diferentes para cada persona. Pantallazos iguales
implica dividir la nota entre los trabajos con pantallazos similares.

Los fragmentos (fragments) son componentes reusables o subactividades (activities). Sirven para
controlar parte de la pantalla y pueden ser reutilizados entre pantallas. En este caso se crear una lista
de recetas. Los fragmentos pueden ser compartidos entre layouts.
Cada fragmento tiene un layout asociado. Java puede ser utilizado para programar todo en la interfaz.
La aplicacin que vamos a programar tiene la siguiente estructura:
1. Cuando la aplicacin Inicia, esta crea la actividad MainActivity
2. MainActivity utilizar dos fragmentos. Uno para desplegar la lista de recetas
RecetaListFragment y el otro para desplegar los ingredientes de cada receta
RecetaDetalleFragment.
3. RecetaListFragment muestra una lista de recetas (utiliza
fragment_receta_list.xml).
4. RecetaDetalleFragment muestra los ingredientes de cada receta.
5. Ambos fragmentos utilizan la clase Receta.java
Paso cero: Se crea un proyecto normal con Android studio y se selecciona como API mmino el 17:

A. Creacin de la clase Receta.java

Cada receta se compone de nombre de la receta e ingredientes. Cree la clase en app/src/main/java y
guarde los cambios.
Creacin del Fragmento inicial:
package test.com.recetascolombianas;
/**
* Created by INVESTIGADOR on 28/03/2016.
*/
public class Receta {
private String name;
private String description;
public static final Receta[] recetas = {
new Receta("Salpicn Colombiano",
"1 porcin de pia\n" +
"1 porcin de mango\n" +
"1 porcin de patilla\n" +
"1 porcin de bananos\n" +
"1 porcin de mandarinas\n" +
"1 porcin de meln\n" +
"1 porcin de uvas\n" +
"1 litro de Gaseosa Colombiana"),
new Receta("Patacon Pisao",

"2 pltanos verdes\n" +

"1kg de costilla de cerdo\n" +
"1 cebolla\n" +
"1 zanahoria\n" +
"4 dientes de ajo\n" +
"1kg de tomate\n" +
"2 pimientos rojos\n" +
"1 cebolla tierna\n"+
"1 ramo de cilantro"),
new Receta("Arroz con Leche",
"Arroz, 215 gramos\n" +
"Leche, litro y medio\n" +
"Azcar, 215 gramos\n" +
"Una rama de canela\n" +
"La piel de un limn\n" +
"Mantequilla, 75 gramos\n" +
"Sal, un poquito\n"),
new Receta("Consom de Pollo",
"1 Libra de Pollo\n" +
"1/2 Libra de Cebolla\n" +
"6 Dientes de Ajo\n" +
"3 Cucharadas de postre de Aceite\n" +
"1 Unidad de Ajoporro\n" +
"1 Unidad de Zanahoria\n" +
"3 Litros de Agua\n" +
"1 Cucharadita de Pimienta negra molida\n" +
"1 Pizca de Sal\n" +
"1 Rama de Celeri\n" +
"3 Unidades de Ajes dulces\n" +
"1 Unidad de Cebolln\n")
};
public Receta(String name, String description) {
this.name = name;
this.description = description;
}
public String getDescription(){
return description;
}
public String getName(){
return name;
}
public String toString(){
return this.name;
}
}

B. Creacin del Fragmento

Ahora desde Android studio cree un fragmento en la misma forma en la que se crea una actividad.
File -> New -> Fragment -> Fragment (Blank).

Como nombre especificamos RecetaDetailFragment y el nombre del Layout es

fragment_workout_detail. Se dejan sin seleccionar las opciones Include fragment Factory methods? Y
Include interface callbacks? (No se requiere el cdigo generado por estas opciones).

El contenido del archivo fragment_receta_detalle.xml en app/src/res/layout queda como el siguiente:

Se despliega el nombre de la receta y los ingredientes en diferentes TextView uno con el ttulo en letras
grandes (textTitle - android:textAppearance="?android:attr/textAppearanceLarge"
)y los ingredientes en (textDescription).
El cdigo del fragmento RecetaDetailFragment.java en app/src/main/java generado luce
como el siguiente:

El mtodo onCreateView es llamado cuando Android necesita el Layout del fragmento. Todos los
fragmentos extienden de la clase Fragment de android.app.Fragment. La lnea:

inflater.inflate(R.layout.fragment_receta_detalle, container, false); Le dice a

android cual layout utiliza el fragment en este caso fragment_receta_detalle.

Todos los fragmentos deben tener el constructor en blanco sin argumentos o en

caso de requerir uno especfico colocarlo.

C. Adicin de un fragmento al layout de una actividad.

El cdigo de activity_main.xml debe lucir como el siguiente:

Como se puede observar el Activity contiene un fragmento. Se especifica que clase utilizar y se utilizar
este cdigo para incluir los ingredientes de la receta.

D. Pasar el cdigo de la receta al Fragmento.

Para esta primera parte colocaremos el id de la receta utilizando un setter
del id de la receta (recetaId).

E. Utilizar la actividad para seleccionar el ID de la receta

Una actividad puede obtener el identificador de un fragmento utilizando el fragment manager.
RecetaDetalleFragment frag = (RecetaDetalleFragment)
getFragmentManager().findFragmentById(R.id.detail_frag);

Donde R.id.detail_frag es el id del fragmento en el Layout del activity.

El cdigo final temporal del Activity ahora debe lucir como el siguiente:

Se observa cmo se obtiene el fragmento correspondiente y se asigna como identificador la receta 1

para que la cargue temporalmente (frag.setRecetaId(1)).

Tanto las actividades como los fragmentos tienen diferentes ciclos de vida:
Para las actividades:

Para los fragmentos los estados son similares a los de un activity, pero interactan con el ciclo de vida
del activity que los contiene:

Como el fragmento creado extiende de la clase Fragment hereda este ciclo de vida:

Como se observa el fragmento no tiene Contexto (Context) as que utiliza el contexto de otros objetos
como por ejemplo el de la actividad padre. Para cargar los detalles de la receta utilizamos el mtodo
onStart del fragment.

F. Ejecutar la aplicacin:

Lo que llevamos hasta ahora:

2 ENTREGABLES

Una compilacin de pantallazos sobre el laboratorio realizado.

3 FUENTES

[NUDELLMAN] NUDELLMAN GREG ANDROID DESIGN PATTERNS. WILEY, 2013. Captulo 4

Dawn Griffiths, David Griffiths. Head First Android Development. O'Reilly Media. 2015