CustomArrayAdapter en Android con ejemplo

En Android, los ArrayAdapters se usan para completar y controlar ListView y Spinners . ArrayAdapter de forma predeterminada proporciona ListItems que incluyen solo información única o TextView único . Para tener un diseño más complejo que incluya información múltiple en un solo ListItem, como imágenes, texto, etc., usamos CustomArrayAdapter . Aplicaciones como Instagram, WhatsApp y muchas más utilizan un diseño tan complejo.

Ejemplo

En este ejemplo, vamos a crear una aplicación para diferentes versiones del sistema operativo Android que tiene un ImageView y un TextView que muestra el nombre de la versión. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

En este paso, agregaremos un ListView a nuestro archivo activity_main.xml que se usa para mostrar los datos de listItems. Vaya a la aplicación > res > diseño > actividad_principal.xml y el siguiente fragmento de código.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="2dp" />
  
</RelativeLayout>

Antes de continuar, agreguemos algunos atributos de color para mejorar la barra de la aplicación. Vaya a aplicación > res > valores > colores.xml y agregue los siguientes atributos de color. 

<resources> 
    <color name="colorPrimary">#0F9D58</color> 
    <color name="colorPrimaryDark">#16E37F</color> 
    <color name="colorAccent">#03DAC5</color> 
</resources> 

Paso 3: Cree un nuevo archivo de diseño list_item.xml

En este paso, crearemos un archivo de diseño para la vista de elemento de lista única. Vaya a app > res > layout > haga clic con el botón derecho en > New > Layout Resource File y asígnele el nombre list_item . list_item.xml contiene un ImageView y un TextView que se utilizan para completar el ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
  
    <!--For image src we have used ic_launcher
        and for text "GeeksForGeeks" and "gfg" 
        they are used only for reference how it will looks"-->
    <ImageView
        android:id="@+id/androidVersionImage"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:padding="8dp"
        android:src="@mipmap/ic_launcher_round" />
  
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
  
        <TextView
            android:id="@+id/androidVersionName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GeeksForGeeks"
            android:textStyle="bold" />
  
        <TextView
            android:id="@+id/androidVersionNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="gfg" />
    </LinearLayout>
  
</LinearLayout>

Paso 4: Cree una nueva clase de Java Item.java

Crearemos una nueva clase Java y la nombraremos Item . Item.java contiene tres variables miembro privadas androidVersionImage, androidVersionName, androidVersionNumber. Más adelante, crearemos una ArrayList de este tipo de elemento. Vaya a aplicación> java> paquete> clic derecho> crear nueva clase java .

public class Item {
  
    private int androidVersionImage;
    private String androidVersionName;
    private String androidVersionNumber;
  
    // Constructor
    public Item(int androidVersionImage, String androidVersionName, String androidVersionNumber) {
        this.androidVersionImage = androidVersionImage;
        this.androidVersionName = androidVersionName;
        this.androidVersionNumber = androidVersionNumber;
  
    }
  
    // Getters and Setters method
    public int getAndroidVersionImage() {
        return androidVersionImage;
    }
  
    public void setAndroidVersionImage(int androidVersionImage) {
        this.androidVersionImage = androidVersionImage;
    }
  
    public String getAndroidVersionName() {
        return androidVersionName;
    }
  
    public void setAndroidVersionName(String androidVersionName) {
        this.androidVersionName = androidVersionName;
    }
  
    public String getAndroidVersionNumber() {
        return androidVersionNumber;
    }
  
    public void setAndroidVersionNumber(String androidVersionNumber) {
        this.androidVersionNumber = androidVersionNumber;
    }
}

Paso 5: Creación de la clase Adaptador

Ahora, crearemos una clase de adaptador que actúe como un puente entre el componente de la interfaz de usuario y la fuente de datos, es decir, androidVersionImage, androidVersionName, androidVersionNumber y ListView. Vaya a la aplicación> java> paquete> haga clic con el botón derecho y cree una nueva clase java y asígnele el nombre Adaptador. A continuación se muestra el fragmento de código que se proporciona para ello.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
  
public class Adapter extends ArrayAdapter <Item> {
  
    ImageView imageView;
    TextView textView1, textView2;
    ArrayList <Item> androidVersionList = new ArrayList <>();
  
    public Adapter(Context context, int textViewResourceId, ArrayList <Item> objects) {
        super(context, textViewResourceId, objects);
        androidVersionList = objects;
    }
  
    // Returns total number of items to be displayed in the list.
    // It counts the value from the arraylist size
    @Override
    public int getCount() {
        return super.getCount();
    }
  
    // This function implicitly gets called when the listItem view is ready
    // to be displayed. Here we set the layout and add data to the views
    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        View view = convertView;
          
          // Setting layout
        LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = layoutInflater.inflate(R.layout.list_item, null);
        imageView = (ImageView) view.findViewById(R.id.androidVersionImage);
        textView1 = (TextView) view.findViewById(R.id.androidVersionName);
        textView2 = (TextView) view.findViewById(R.id.androidVersionNumber);
          
           // Adding data to the Views
        imageView.setImageResource(androidVersionList.get(position).getAndroidVersionImage());
        textView1.setText(androidVersionList.get(position).getAndroidVersionName());
        textView2.setText(androidVersionList.get(position).getAndroidVersionNumber());
        return view;
    }
}

Paso 6: trabajar con el archivo MainActivity.java

En la clase MainActivity.java creamos un ArrayList para almacenar imágenes y textos. Estas imágenes se colocan en la carpeta dibujable ( aplicación > res > dibujable ). Puede usar cualquier imagen en lugar de esto. Obtenemos la referencia de listView y configuramos el adaptador en listView.

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    ListView listView;
    ArrayList <Item> androidVersionList = new ArrayList <>();
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
          // Getting the reference of listView
        listView = (ListView) findViewById(R.id.listView);
          
          // Adding image and texts to list
        androidVersionList.add(new Item(R.drawable.donut, "Donut", "1.6"));
        androidVersionList.add(new Item(R.drawable.eclair, "Eclair", "2.0 - 2.1"));
        androidVersionList.add(new Item(R.drawable.froyo, "Froyo", "2.2 - 2.2.3"));
        androidVersionList.add(new Item(R.drawable.gingerbread, "GingerBreak", "2.3 - 2.3.7"));
        androidVersionList.add(new Item(R.drawable.honeycomb, "HoneyComb", "3.0 - 3.2.6"));
        androidVersionList.add(new Item(R.drawable.icecream, "IceCream", "4.0 - 4.0.4"));
        androidVersionList.add(new Item(R.drawable.jellybean, "JellyBean", "4.1 - 4.3.1"));
        androidVersionList.add(new Item(R.drawable.kitkat, "KitKat", "4.4 - 4.4.4"));
        androidVersionList.add(new Item(R.drawable.lollipop, "Lollipop", "5.0 - 5.1.1"));
        androidVersionList.add(new Item(R.drawable.marshmallow, "Marshmallow", "6.0 - 6.0.1"));
  
        Adapter adapter = new Adapter(this, R.layout.list_item, androidVersionList);
          
          // Setting the adapter to list
        listView.setAdapter(adapter);
    }
}

Salida: ejecutar en el emulador