Programación multimedia. ListView personalizados

¿Os acordáis de la aplicación con la que trabajamos los ListView? Bien, pues vamos a mejorarla para que en cada opción que nos dé aparezca un icono además del texto. La idea a conseguir, aproximadamente, es algo como el siguiente ejemplo:

Esto conseguiremos hacerlo mediante un layout de ítem propio.

Crearemos un RelativeLayout para el ítem, donde el alto se establece a partir de un parámetro de configuración del sistema para alturas de ítems en ListView: ?android:attr/listPrefferedItemHeight.

El primer elemento que contiene es un ImageView alineado a la izquierda. Su alto y su ancho también pueden ser el mismo parámetro indicado.

En el código Java de la actividad debe crearse el adaptador indicando el nombre del layout que debe utilizarse y el nombre del elemento donde se visualizará el valor de cada ítem.

Sabiendo esto, vayamos por pasos.

Nuestro activity_listas presentaba el siguiente aspecto:

El XML por si se quiere generar de nuevo es el siguiente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Listas"

    android:background="#FF5722">

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Ejemplo de listado"

        android:id="@+id/lblTitulo"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:textColor="#FFFFFF"

        android:textSize="@dimen/abc_action_button_min_width_overflow_material"

        android:textStyle="bold"

        android:gravity="center_horizontal" />

    <ListView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@android:id/list"

        android:layout_below="@+id/lblTitulo"

        android:layout_alignParentLeft="true"

        android:layout_alignParentStart="true"

        android:layout_marginTop="40dp"

        android:touchscreenBlocksFocus="false"

        android:textAlignment="center"

        android:gravity="center" />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Resultado"

        android:id="@+id/lblResultado"

        android:layout_below="@+id/lblTitulo"

        android:layout_centerHorizontal="true"

        android:textSize="@dimen/abc_dialog_padding_material"

        android:textColor="#FFFFFF"

        android:gravity="center_horizontal" />

</RelativeLayout>

El siguiente paso será alojar en el directorio drawable el icono que usaremos para colocarlo en los ítems de nuestra lista. En mi caso este:

Y generamos un nuevo layout, ítem_layout por ejemplo, en el que dentro del Relative_layout insertaremos un ImageView y un TextView, este último con el texto vacío, y la imagen haciendo referencia a la que querremos usar de icono.

Y para las propiedades de altura y anchura de los elementos colocaremos la siguiente medida:

?android:attr/listPreferredItemHeight

Dejo el XML completo para poder hacernos idea:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="?android:attr/listPreferredItemHeight">

    <ImageView

        android:layout_width="?android:attr/listPreferredItemHeight"

        android:layout_height="?android:attr/listPreferredItemHeight"

        android:id="@+id/icono"

        android:src="@drawable/android"

        android:layout_alignParentLeft="true" />

    <TextView

        android:layout_width="?android:attr/listPreferredItemHeight"

        android:layout_height="?android:attr/listPreferredItemHeight"

        android:id="@+id/titulo"

        android:layout_marginLeft="70dp" />

</RelativeLayout>

Y por último, en la clase Listas.java escribiremos lo siguiente:

private TextView resultado;

private ListView lista;

private String[] cursos;

private String[] asignaturas;

@Override

protected void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.activity_listas);

     resultado = (TextView)findViewById(R.id.lblResultado);

     lista = (ListView)findViewById(android.R.id.list);

     asignaturas = getResources().getStringArray(R.array.opcion);

     ListAdapter adapter = new ArrayAdapter<String>(this, R.layout.item_layout, R.id.titulo, asignaturas);

     lista.setAdapter(adapter);

}

@Override

protected void onListItemClick(ListView l, View v, int position, long id){

     super.onListItemClick(l, v, position, id);

     cursos = getResources().getStringArray(R.array.curso);

     resultado.setText(l.getItemAtPosition(position) + " es de " + cursos[position]);

}

Es decir, ahora haremos la referencia con la nueva activity también para cargar los iconos.

Si ejecutas la aplicación, aparecerá algo así: