---
title: Programar Fragments (fragmentos) en Android
url: https://jarroba.com/programar-fragments-fragmentos-en-android/
author: Ramón Invarato
date: 2013-08-19
modified: 2026-10-21
language: es
license: CC BY-NC-SA 3.0 (https://creativecommons.org/licenses/by-nc-sa/3.0/) — attribution: "Programar Fragments (fragmentos) en Android", Ramón Invarato, jarroba.com
categories: Aplicaciones Móviles
series: Fragments en Android (part 2 of 2)
---

# Programar Fragments (fragmentos) en Android

> Aprende fácilmente como programar Fragments en Android. Ejemplos completos.

Después del primer artículo ([ver primera parte aquí](https://jarroba.com/fragments-fragmentos-en-android/)), continuamos donde lo dejamos y preparados para programar con Fragments en Android. Comenzaré con una descripción ilustrada para que no quepan dudas, o al menos sean mínimas. Continuemos donde lo dejamos. Retomamos el ejemplo para diseñar el Smartphone. Veamos qué tendremos una Activity con un listado que representaremos el diseño como:

 

[![Diseño listado Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-listado-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-listado-Fragments-Android-www.Jarroba.com_.png)

 

Distinguiré lo **verde como Fragment** y lo **rojo como Activity**. El resto de contenido pertenece al Layout (texto, imágenes, etc). Y un al pulsar sobre un elemento de la lista, nos abrirá una segunda Activity que será el detalle de la entrada:

 

[![Diseño detalle Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-detalle-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-detalle-Fragments-Android-www.Jarroba.com_.png)

 

Ahora un par de preguntas sobre la representación del detalle de la entrada (la imagen anterior), para ver si has entendido la teoría ¿Cuántos Layouts, es decir, ficheros XML de la carpeta Layout, componen esta Activity? ¿Y dónde estarían ubicados? La solución es 2 Layouts, y están ubicados donde se muestra en la imagen a continuación (la letra más pequeña en negrita con rectángulo transparente):

 

[![Diseño detalle layouts Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-detalle-layouts-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-detalle-layouts-Fragments-Android-www.Jarroba.com_.png)

 

Si no has acertado, no te preocupes, a continuación lo explico. Si has dado con la solución a la primera, me quito el sombrero, ya que has entendido la complejidad de las vistas de los Fragments. La Activity tiene asociado un Layout como siempre, que llamaremos “Layout_activity_detalle” (engloba todo el rectángulo rojo) –es la asociación Layout con Activity típica. Y hemos dicho que el Fragment es como si fuera una Activity pero pequeña, con lo que también tiene asociado un Layout que llamamos “Layout_fragment_detalle”. Espero que los nombres sean acertados y aclaratorios 🙂 Hemos dejado para el final el primero, porque tiene una particularidad. Si te hago las dos preguntas anteriores ¿Dónde y cuántos Layouts componen el listado? Podrías decirme que 3, pero no son 3 sino 2. Fíjate en la siguiente imagen un segundo y te lo explico.

 

[![Diseño listado layouts  Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-listado-layouts-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-listado-layouts-Fragments-Android-www.Jarroba.com_.png)

 

La actividad tiene, como acostumbra, su Layout asociado llamado “Layout_activity_principal_listado”. El Fragment no tiene fichero de Layout asociado ¿No me acabas de decir que sí tenía Layout, además, es el fichero XML tiene un ListView claramente? En Fragments el listado es un caso especial. Si has tocado listas un poco más en profundidad sabrás que si extendemos la clase, en vez de con Activity con ListActivity, no hace falta declarar un fichero con el ListView. Con Fragments es igual si extendemos de ListFragment. Usaremos este modo por simplificar código. Y aclarar que en este Fragment existir existe el Layout con el ListView, pero no lo haremos nosotros directamente. Ya terminamos con el último Layout, el de cada elemento de la lista llamado “Layout_elemento_listado”. Aquí acaba el diseño para dispositivos móviles. Ahora el de la Tablet en el que me explayaré menos en detalles, pasando a lo importante. Recordamos que queremos que todo se muestra a la vez (listado y detalle).

 

[![Diseño tablet Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-tablet-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-tablet-Fragments-Android-www.Jarroba.com_.png)

 

Notarás cómo están separados los dos Fragments y que solo necesitamos una Activity. También te hago las mismas preguntas anteriores sobre los Layouts ¿Cuántos y dónde están ubicados? Esta es fácil habiéndolo visto anteriormente.

 

[![Diseño tablet Layouts Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Diseño-tablet-Layouts-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Diseño-tablet-Layouts-Fragments-Android-www.Jarroba.com_.png)

 

Bueno, existía una trampa al tratarse de una sola Activity. En el diseño de móvil cada actividad tenía un Layout que contenía un Fragment. En el diseño para Tablets, solo existe una Activity que tiene asociado un Layout que contiene a los dos Fragments. Es razonable que sea así; quería dejar clara esta diferencia. Por cierto, estos van a ser todos los Layouts que vamos a utilizar y ninguno más (todos los has visto en las imágenes anteriores):

 

[![Directorio Layout - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Directorio-Layout-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Directorio-Layout-www.Jarroba.com_.png)

 

Ya llega el código, tranquilo. Es importante no perderse con tanto archivo y tener las ideas muy claras. Previo a revelarte el código XML, hay un simplismo que debes conocer. Se suele pasar por alto y no debería, es fuente de muchos errores, por consiguiente se obtiene desesperación al tratar con Fragments (ya nunca más 😀 ). El tema de Fragments estáticos o finales y dinámicos:

 
- Un **Fragment estático o final** es aquel que se declara en el fichero XML de la carpeta Layout directamente. Este Fragment tendrá la cualidad de no ser eliminado o sustituido por nada -De lo contrario tendremos errores.
- Un **Fragment dinámico** es el que se crea desde código Java y se asocia a un ViewGroup (Se recomienda el uso de FrameLayout). Éste sí que se podrá eliminar o sustituir por otro Fragment u otro contenido.

 

Para entenderlo bien, con el ejemplo del Tablet nos bastará.

 

[![Fragments estaticos y dinamicos de Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Fragments-estaticos-y-dinamicos-de-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Fragments-estaticos-y-dinamicos-de-Android-www.Jarroba.com_.png)

 

Tenemos el listado, que es algo que siempre va a ser igual (podrán aumentar o disminuir los elementos contenidos en el listado, pero siempre será un listado), por lo que podemos declarar su fragment en el XML, es estático. Y luego tenemos la parte derecha del detalle, dependiendo del seleccionado en el listado mostrará el detalle de un pájaro (descripción, nombre y foto) diferente. Con lo que cada detalle de cada pájaro tendrá su propio Fragment -si los equiparamos a las hojas de un libro, pasar cada Fragment equivaldría a pasar las hojas del libro de pájaros- por lo que nos interesa que estos Fragments sean dinámicos. Lo que nos dibujará el siguiente Layout con un Fragment estático en XML y un FrameLayout que contendrá a los Fragments dinámicos.

 

[![Layout tablet Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Layout-tablet-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Layout-tablet-Fragments-Android-www.Jarroba.com_.png)

 

Por lo que el código de **layout_activity_principal_dospaneles.xml** será:

 

```xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle" >

    <!--
    Este fragmento estático contiene al listado
    -->
    <fragment
        android:id="@+id/fragment_listado"
        android:name="jarroba.invarato.fragmentos.Fragment_Lista"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <!--
    Este FrameLayout contendrá un fragmento dinámico con el contenido del elemento pulsado del listado
    -->
    <FrameLayout
        android:id="@+id/framelayout_contenedor_detalle"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>
```

 

Del mismo modo, para móvil, tenemos por separado el listado con el Fragment estático. Cuyo código de **layout_activity_principal_listado.xml** es:

 

```xml

<!--
Este fragmento estático contiene al listado
-->
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_listado"
    android:name="jarroba.invarato.fragmentos.Fragment_Lista"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp" />
```

 

Y por otra parte, de manera separada pero con la misma lógica al que hemos explicado de la Tablet, tenemos el Fragment dinámico para el detalle. Para **layout_activity_detalle.xml**:

 

```xml

<!--
Este FrameLayout contendrá un fragmento dinámico con el contenido del elemento pulsado del listado
-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/framelayout_contenedor_detalle"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```

 

También tenemos la estructura simple de la vista de cada elemento del listado en **layout_elemento_listado.xml**:

 

```xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center|left"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView_imagen_miniatura"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:contentDescription="Descripción del contenido de la imagen"
        android:src="@android:drawable/ic_menu_gallery" />

    <TextView
        android:id="@+id/textView_titulo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>
```

 

Y el del detalle, en **layout_fragment_detalle.xml**:

 

```xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center|top"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView_superior"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imageView_imagen"
        android:layout_width="178dp"
        android:layout_height="178dp"
        android:adjustViewBounds="true"
        android:contentDescription="Descripción del contenido de la imagen"
        android:scaleType="fitXY"
        android:src="@android:drawable/ic_menu_gallery" />

    <TextView
        android:id="@+id/textView_inferior"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>
```

 

Ya tenemos las vistas. Antes de entrar con Java, tenemos que hacer una diferenciación más. Necesitamos **diferenciar con qué tipo de pantalla estamos tratando** para poder aplicar el diseño de móvil o de tablet. Esta diferenciación Android la hace muy bien gracias a las carpetas “values”, que están en la carpeta “res”.

 

[![Directorio Values - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Directorio-Values-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Directorio-Values-www.Jarroba.com_.png)

 

Tendremos 3 carpetas “values” (más información en [Screen compatibility overview (Android Developers)](http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts)):

 
- values-large: para pantallas grandes; es decir, para Tablets (Necesario para que funcione en la versión 3 de Android). Crearemos en esta carpeta un nuevo fichero XML llamado “layout.xml” (lo explico un poco más adelante).
- values-sw600dp: para pantallas con un ancho mayor a 600dp (independientemente de la rotación de la pantalla); para Tablets de este tamaño o más. Este valor lo podemos cambiar, pero 600 nos va a funcionar muy bien para nuestros propósitos. Crearemos en esta carpeta otro nuevo fichero XML también llamado “layout.xml” (lo explico un poco más adelante).
- values: carpeta de valores para el resto de dispositivos que no cumplan las condiciones anteriores. Lo usarán los Smartphones, o las Tablets pequeñas que no cumplan el tamaño mínimo que hemos puesto. No tocamos ni añadimos nada en esta carpeta.

 

Hemos creado dos ficheros llamados “layout.xml”. Ambos contendrán el mismo contenido que es el siguiente:

 

```xml

<resources>
    <item name="layout_activity_principal_listado" type="layout">@layout/layout_activity_principal_dospaneles</item>
</resources>
```

 

Esto es un truquito que te cuento para no repetir ficheros: los alias. Podríamos haber creado varias carpetas “layout” pero tendríamos código duplicado con lo mismo; con el alias evitamos repetir código innecesariamente. Este **alias lo único que hace es sustituir el contenido de un XML por otro**. Así, si la pantalla es pequeña cargará directamente el XML “layout_activity_principal_listado.xml” en el que solo se muestra un listado; y si es grande, el contenido de este fichero será sustituido por el contenido del fichero “layout_activity_principal_dospaneles.xml” que dispone un Fragment a la izquierda para el listado y un FrameLayout a la derecha para el Fragment dinámico del detalle. Para mayor claridad, echa un vistazo a la imagen siguiente:

 

[![Tipo de pantalla influye en lo mostrado en la aplicacion Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Tipo-de-pantalla-influye-en-lo-mostrado-en-la-aplicacion-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Tipo-de-pantalla-influye-en-lo-mostrado-en-la-aplicacion-Fragments-Android-www.Jarroba.com_.png)

 

Ahora ya podemos meternos de lleno con el código Java. Primero te voy a mostrar la estructura completa del proyecto, deberás crear las clases Java (que detallo a continuación) y añadir las imágenes. De la carpeta “res” ya está todo terminado. De la siguiente imagen solo hemos creado lo que está en rojo para hacer la aplicación.

 

[![Estructura completa de la aplicacion  Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Estructura-completa-de-la-aplicacion-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Estructura-completa-de-la-aplicacion-Fragments-Android-www.Jarroba.com_.png)

 

Empecemos por el código primero en ejecutarse, que es **Activity_Principal.java**. Esta es una Activity, pero para tratar con Fragments necesitamos un tipo de Activity especial llamada “FragmentActivity” de la que extenderemos la clase. Pero antes vamos a explicar en esencia lo que hace, que son dos cosas y luego muestro el código:

 
1. Diferenciar la cantidad de elementos que maneja para cada tipo de dispositivo: En el “onCreate” le asociaremos el Layout “layout_activity_principal_listado.xml” –recordemos que su contenido tendrá únicamente un listado, o un listado y un detalle, dependiendo del tamaño de la pantalla. Para saber si estamos trabajando con dos Fragments en la misma Activity, es tan sencillo como preguntar si existe el detalle, sino existe estaremos trabajando con un solo Fragment que será sin lugar a dudas el listado.
2. Comunicar a los Fragments: Programaremos los Fragments de manera completamente modular; es decir, un Fragment no se comunica con otro directamente sino a través de interfaces. Funciona del siguiente modo (para mayor claridad, echar un vistazo a la imagen inferior que es para el caso del Tablet; para el Smartphone sería igual, pero pasándole el dato de una Activity a la otra, y ésta ya se lo comunicaría al Fragment con el detalle):

 

[![Listeners y callback Fragments Android - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Listeners-y-callback-Fragments-Android-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Listeners-y-callback-Fragments-Android-www.Jarroba.com_.png)

 

1) Se pulsa sobre un elemento del Fragment que contiene al listado. A través de un método de Callback “onEntradaSeleccionada” (esto es programación por eventos, en este artículo explicamos su comportamiento, pero resumimos al explicar el código por no ser el tema principal del artículo) comunica el id de la entrada seleccionada a la Activity que lo engloba (de ahí que implemente a “Fragment_Lista.Callbacks”).

 

2) La Activity recoge el dato. Si:

 
- Es Tablet: crea un nuevo Fragment con el detalle, le envía el id para que cargue el contenido apropiado y lo coloca en el FrameLayout, reemplazando cualquier otro Fragment con el detalle que pueda existir.
- Es Smartphone: Crea una nueva Activity al que le envía el id. La nueva Activity cargará el Fragment con el detalle sobre sí misma.

 

3) Se muestra el Fragment con el detalle al usuario. Y este es el código correspondiente de esta clase:

 

```java

public class Activity_Principal extends FragmentActivity implements Fragment_Lista.Callbacks {

	private boolean dosFragmentos;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_activity_principal_listado);

		if (findViewById(R.id.framelayout_contenedor_detalle) != null) {
			dosFragmentos = true;
		}
	}

	@Override
	public void onEntradaSelecionada(String id) {
		if (dosFragmentos) {
			Bundle arguments = new Bundle();
			arguments.putString(Fragment_Detalle.ARG_ID_ENTRADA_SELECIONADA, id);
			Fragment_Detalle fragment = new Fragment_Detalle();
			fragment.setArguments(arguments);
			getSupportFragmentManager().beginTransaction().replace(R.id.framelayout_contenedor_detalle, fragment).commit();

		} else {
			Intent detailIntent = new Intent(this, Activity_Detalle.class);
			detailIntent.putExtra(Fragment_Detalle.ARG_ID_ENTRADA_SELECIONADA, id);
			startActivity(detailIntent);
		}
	}
}
```

 

Comencemos con un Fragment normal, que es el del detalle. Para ello escribimos el código de **Fragment_Detalle.java**. Por ser un Fragment normal y corriente extenderá de Fragment. Explico el contenido de los métodos:

 
- Constructor: en los Fragments siempre vacío para poder instanciarlo.
- onCreate: recoge el contenido de la entrada.
- onCreateView: aquí se maneja la vista, es decir crea y se asocia con el Layout (en Activity se hace en el onCreate con el método “setContentView”; pero esto es un Fragment, funciona de manera diferente y es así como se hace, con inflate(). [Averigua todo sobre inflate() en este otro artículo](https://jarroba.com/inflate-en-android-inflar-y-adjuntar-views/)).

 

```java

public class Fragment_Detalle extends Fragment {

	public static final String ARG_ID_ENTRADA_SELECIONADA = "item_id";
	private Lista_contenido.Lista_entrada mItem;

	public Fragment_Detalle() {
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		if (getArguments().containsKey(ARG_ID_ENTRADA_SELECIONADA)) {
			//Cargamos el contenido de la entrada con cierto ID seleccionado en la lista. Se recomiendo usar un Loader para cargar el contenido
			mItem = Lista_contenido.ENTRADAS_LISTA_HASHMAP.get(getArguments().getString(ARG_ID_ENTRADA_SELECIONADA));
		}
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.layout_fragment_detalle, container, false);

		//Mostramos el contenido al usuario
		if (mItem != null) {
			((TextView) rootView.findViewById(R.id.textView_superior)).setText(mItem.textoEncima);
			((TextView) rootView.findViewById(R.id.textView_inferior)).setText(mItem.textoDebajo);
			((ImageView) rootView.findViewById(R.id.imageView_imagen)).setImageResource(mItem.idImagen);
		}

		return rootView;
	}
}
```

 

**¿Exporto android.support.v4.app o android.app?** A la hora de exportar la librería de Fragment (por ejemplo, aunque también podría darse el caso con FragmentManager, FragmentTransaction, etc). Eclipse te dará a elegir entre las dos opciones dos: "android.app.Fragment" -solo funciona a partir de Android 3.0 ó nivel 11- o "android.support.v4.app.Fragment" -para cualquier versión de Android. Nuestra recomendación es que uses "**android.app.***" (utiliza "android.support.v4.app.*" si vas a desarrollar para versiones muy antiguas de Android, tal como la 2.1). Nunca mezcles en el mismo proyecto las dos librerías a importar (por ejemplo, que hayas importado "android.support.v4.app.FragmentManager" y "android.app.Fragment" ), pues lo más probable es que te encuentres con alguna variante del siguiente error en tiempo de ejecución: The method replace(…) in the type FragmentTransaction is not applicable for the arguments (…) **La solución** ya sabes que debes hacer: buscar y cambiar el archivo importado que no cumple lo anterior descrito y cambiarlo por el otro (en el anterior ejemplo, nos damos cuenta y lo cambiamos a "android.app.FragmentManager" y "android.app.Fragment" ).

 

Entendido el Fragment normal, ahora uno especial. Implementaremos el del listado en **Fragment_Lista.java**. Esta clase es un Fragment, pero es un Fragment especial que extenderá de ListFragment, que es el listado preparado para ser Fragment (Aquí no asociamos ningún Layout, pues al extender de ListFragment ya lo trae puesto). Callback: Tendrá implementado el Callback que notifique a la Activity de que elemento del listado se haya pulsado. Explico uno a uno los métodos aquí usados:

 
- Constructor: Seguro que te fijarás en el constructor vacío, es necesario para el correcto funcionamiento de los Fragments, así que ni se te ocurra quitarlo :D.
- onCreate: como ya hicimos [en el artículo de listado](https://jarroba.com/listview-o-listado-en-android/) asignamos el contenido de cada entrada a cada elemento del listado.
- onAttach: Simplemente asegura que el desarrollador haya implementado el Callback, en la clase que use a este Fragment.
- onDetach: Limpia el Callback.
- onListItemClick: al extender de ListFragment, es necesario sobrescribir esta clase, que es la que escucha la pulsación sobre un elemento de la lista. Y así usaremos el Callback para notificar a la Actividad del id pulsado.

 

```java

public class Fragment_Lista extends ListFragment {

	private Callbacks mCallbacks = CallbacksVacios;

	public interface Callbacks {
		public void onEntradaSelecionada(String id);
	}

	private static Callbacks CallbacksVacios = new Callbacks() {
		@Override
		public void onEntradaSelecionada(String id) {
		}
	};

	public Fragment_Lista() {
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

        setListAdapter(new Lista_adaptador(getActivity(), R.layout.layout_elemento_listado, Lista_contenido.ENTRADAS_LISTA){
			@Override
			public void onEntrada(Object entrada, View view) {
		        if (entrada != null) {
		            TextView texto_superior_entrada = (TextView) view.findViewById(R.id.textView_titulo); 
		            if (texto_superior_entrada != null) 
		            	texto_superior_entrada.setText(((Lista_contenido.Lista_entrada) entrada).textoEncima); 

		            ImageView imagen_entrada = (ImageView) view.findViewById(R.id.imageView_imagen_miniatura); 
		            if (imagen_entrada != null)
		            	imagen_entrada.setImageResource(((Lista_contenido.Lista_entrada) entrada).idImagen);
		        }
			}
		});

	}

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);

		if (!(activity instanceof Callbacks)) {
			throw new IllegalStateException("Error: La actividad debe implementar el callback del fragmento");
		}

		mCallbacks = (Callbacks) activity;
	}

	@Override
	public void onDetach() {
		super.onDetach();
		mCallbacks = CallbacksVacios;
	}

	@Override
	public void onListItemClick(ListView listView, View view, int posicion, long id) {
		super.onListItemClick(listView, view, posicion, id);		
		mCallbacks.onEntradaSelecionada(Lista_contenido.ENTRADAS_LISTA.get(posicion).id);
	}

}
```

 

Hasta aquí ya tenemos lo que hace funcionar la estructura de los Tablets. Continuemos para el caso de Smartphone. Necesitamos un segundo Activity para contener al Fragment del detalle. Llamaremos **Activity_Detalle**. ¿Recuerdas que heredaba? A Activity no, estamos trabajando con Fragments, extiende de FragmentActivity. Solo tiene un método onCreate que comprobará si ya ha creado al Fragment del detalle para cargarlo, o no para crearlo. La creación del Fragment del detalle es igual que en el caso de Activity_Principal.java.

 

```java

public class Activity_Detalle extends FragmentActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_activity_detalle);

		// Comprobamos que previamente no hayamos entrado en esta actividad (por ejemplo, al rotar el dispositivo). Si es así se añade el fragmento al contenedor
		if (savedInstanceState == null) {
			// Crea el fragmento del detalle de la entrada y lo añade a la actividad
			Bundle arguments = new Bundle();
			arguments.putString(Fragment_Detalle.ARG_ID_ENTRADA_SELECIONADA, getIntent().getStringExtra(Fragment_Detalle.ARG_ID_ENTRADA_SELECIONADA));
			Fragment_Detalle fragment = new Fragment_Detalle();
			fragment.setArguments(arguments);
			getSupportFragmentManager().beginTransaction().add(R.id.framelayout_contenedor_detalle, fragment).commit();
		}
	}

}
```

 

Ya solo nos queda comentar **Lista_adaptador.java** que encontrarás en [el artículo del listado](https://jarroba.com/listview-o-listado-en-android/). Y **Lista_contenido.java**, que contiene a la clase Lista_entrada del artículo del listado. Lo hemos hecho así por simplificar el código. Ya que si los datos no van a cambiar, así es muy fácil hacer una estructura estática que de elementos que siempre esté visible por todas las clases sea el momento que sea de la ejecución. Simplemente guardamos unos listados con el contenido de las entradas estáticamente, esto se hace al inicio de la aplicación.

 

```java

public class Lista_contenido {

	/** 
	 * Donde se guardan las entradas de la lista.
	 */
	public static ArrayList<Lista_entrada> ENTRADAS_LISTA = new ArrayList<Lista_entrada>();

	/** 
	 * Donde se asigna el identificador a cada entrada de la lista
	 */
	public static Map<String, Lista_entrada> ENTRADAS_LISTA_HASHMAP = new HashMap<String, Lista_entrada>();

	/** 
	 * Creamos estáticamente las entradas
	 */
	static {
		aniadirEntrada(new Lista_entrada("0", R.drawable.im_buho, "BUHO", "Búho es el nombre común..."));
		aniadirEntrada(new Lista_entrada("1", R.drawable.im_colibri, "COLIBRÍ", "Los troquilinos (Trochilinae) son..."));
		aniadirEntrada(new Lista_entrada("2", R.drawable.im_cuervo, "CUERVO", "El cuervo común (Corvus corax) es ..."));
		aniadirEntrada(new Lista_entrada("3", R.drawable.im_flamenco, "FLAMENCO", "Los fenicopteriformes..."));
		aniadirEntrada(new Lista_entrada("4", R.drawable.im_kiwi, "KIWI", "Los kiwis (Apterix, gr. 'sin alas') son..."));
		aniadirEntrada(new Lista_entrada("5", R.drawable.im_loro, "LORO", "Las Psitácidas (Psittacidae) son..."));
		aniadirEntrada(new Lista_entrada("6", R.drawable.im_pavo, "PAVO", "Pavo es un género de aves..."));
	}

	/** Añade una entrada a la lista
	 * @param entrada Elemento que añadimos a la lista
	 */
	private static void aniadirEntrada(Lista_entrada entrada) {
		ENTRADAS_LISTA.add(entrada);
		ENTRADAS_LISTA_HASHMAP.put(entrada.id, entrada);
	}

	/**
	 * Representa una entrada del contenido de la lista
	 */
	public static class Lista_entrada {
		public String id;
		public int idImagen; 
		public String textoEncima; 
		public String textoDebajo; 

		public Lista_entrada (String id, int idImagen, String textoEncima, String textoDebajo) { 
			this.id = id;
		    this.idImagen = idImagen; 
		    this.textoEncima = textoEncima; 
		    this.textoDebajo = textoDebajo; 
		}
	}

}
```

 

Y nos falta añadir al **AndroidManifest.xml** la Actividad que no es la principal, es decir Activity_Detalle. Este es mi AndroidManifest:

 

```xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jarroba.invarato.fragmentos"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="jarroba.invarato.fragmentos.Activity_Principal"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="jarroba.invarato.fragmentos.Activity_Detalle"
            android:label="@string/titulo_detalle_entrada"
            android:parentActivityName=".Activity_Principal" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".Activity_Detalle" />
        </activity>
    </application>

</manifest>
```

 

Dejo aquí el código funcional para descargar, bastante comentado para aclarar todavía más las posibles dudas que queden en el tintero. **Descárgalo aquí: [Fragmentos](https://jarroba.com/wp-content/uploads/2013/08/Fragmentos.zip)** Te recomiendo que lo pruebes tanto con un emulador –o dispositivo físico- de Smartphone, como de Tablet, para que veas como queda en cada dispositivo.

 

**Nota**: si quieres ahorrarte un montón de código aprovechando ahora que entiendes la arquitectura de los Fragments. Al crear un nuevo proyecto Android puedes seleccionar “Master/Detail Flow” en la página “Create Activity”. Lo único que, como usa ActionBar, requiere de mínimo Android 3.0 (API 11 o Honeycomb). 

 

[![Nuevo aplicacion Android con Fragments - www.Jarroba.com](https://jarroba.com/wp-content/uploads/2013/08/Nuevo-aplicacion-Android-con-Fragments-www.Jarroba.com_.png)](https://jarroba.com/wp-content/uploads/2013/08/Nuevo-aplicacion-Android-con-Fragments-www.Jarroba.com_.png)

 

Y con esto acabamos los fragmentos. La estructura mental de Fragment tiene cosas que ver y cosas que son completamente diferentes a la de Activity. Una vez entendidas te aseguro que son muy fáciles 😀

## Serie: Fragments en Android

1. [Fragments (fragmentos) en Android](https://jarroba.com/fragments-fragmentos-en-android.md)
2. [Programar Fragments (fragmentos) en Android](https://jarroba.com/programar-fragments-fragmentos-en-android.md)

