Cómo personalizar listas (ListView) en Android Studio

¿Quieres personalizar listas o listView en Android Studio? cuando yo inicie en la programación con android e implante mi primer ListView y compare con otros ejercicios de programadores mas avanzados me di cuenta que el mio era una porquería jajaja y por entonces no había muchas guías y recuerdo que se trabaja en eclipse, entonces en honor a ese recuerdo hoy te voy a enseñar una bonita forma de crear listas más personalizadas y con un estilo propio, alejándonos de las clásicas listas de Android Studio. Además, esto nos permitirá añadir imágenes o botones entre muchas otras cosas a las listas.
Después de haber visto cómo lanzar un segundo activity, crear un adapter personalizado en Android Studio será como comer pizza gratis, así que vamos a ver cómo crearlos.
Crear lista/adapter personalizado en Android Studio
Para crear un adapter personalizado, y muy básico, en Android vamos a ver un sencillo ejemplo con una lista de frutas en la que mostraremos un ImageView y un TextView.
Primero te aconsejo crear un nuevo proyecto para no tener problemas con otras clases y después lo puedes portar a dónde tú quieras. Para que te hagas una idea, el resultado final sería algo como esto, un ejemplo de lista personalizada en Android Studio.

LISTA (LISTVIEW) PERSONALIZADA EN ANDROID STUDIO

 

PASO 1: Tenemos que ir a nuestro activity_main.xml e insertar un texView para el titulo y un listView para mostrar la lista y se vera de la siguiente forma

.

Y el código seria el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.androidmorefast.pc.appdiseniolistview.MainActivity"
    android:orientation="vertical">

    <TextView
        android:text="LISTA DE FRUTAS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24dp"
        android:textStyle="bold"
        android:id="@+id/textView" />

    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/lvListado" />
</LinearLayout>

 

Ahora debemos crear un archivo layout que nos servirá para modelar mejor el diseño de la lista,
la creamos de la siguiente forma: clic sobre layout–new–Layout resource file como se muestra en la siguiente imagen

                           Clic en la imagen para agrandar

Este nuevo layout le pondremos de nombre lista_frutas.xml dentro de el ira un texView y una imageView

CÓDIGO:

<?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="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imgFrutas"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="textView" />

</LinearLayout>

 

PASO 2: Ahora nos toca trabajar con nuestras clases, así que iremos primero a nuestro MainActivity.java y tendrá el siguiente código:

MainActivity

public class MainActivity extends Activity {

    ListView lista;
    Context context;

    ArrayList prgmNombre;
    public static int [] prgmImages={R.drawable.banana,R.drawable.coco,
        R.drawable.manzana,R.drawable.pera,R.drawable.sandia,R.drawable.uva};
    public static String [] progNombreLista={"BANANA","COCO++","MANZANA","PERA",
                                          "SANDIA","UVA"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        context=this;

        lista=(ListView) findViewById(R.id.lvListado);
        lista.setAdapter(new GestionarAdapter(this, progNombreLista,prgmImages));

    }

}

 

Ahora también debemos crear una nueva clase java a la cual llamaremos GestionarAdapter.java  se crea de la siguiente forma como se muestra en la imagen:

 

y tendrá el siguiente código:

public class GestionarAdapter extends BaseAdapter {
    String[] resultado;
    int[] imgId;
    Context contexto;

    private static LayoutInflater inflater= null;
    public GestionarAdapter (MainActivity mainActivity,String[]progNombreLista,int[]progImg) {
        resultado = progNombreLista;
        contexto = mainActivity;
        imgId = progImg;
        inflater = (LayoutInflater) contexto.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

          }
    @Override
        public int getCount(){
           return resultado.length;
        }
    @Override
        public  Object getItem(int posicion) {
            return posicion;
        }
    @Override
       public  long  getItemId(int posicion) {
        return posicion;
        }
    public class Holder
    {
        TextView tv;
        ImageView img;
    }
    @Override
    public View getView(final int posicion, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Holder holder=new Holder();
        View fila;
        fila = inflater.inflate(R.layout.lista_frutas, null);
        holder.tv=(TextView) fila.findViewById(R.id.textView);
        holder.img=(ImageView) fila.findViewById(R.id.imgFrutas);
        holder.tv.setText(resultado[posicion]);
        holder.img.setImageResource(imgId[posicion]);
        fila.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Toast.makeText(contexto, "Seleccionaste "+resultado[posicion],
                 Toast.LENGTH_LONG).show();
            }
        });
        return fila;
    }

}

 

Bien y con eso hemos terminado, espero les ayude a mejorar sus ejercicios y futuros proyectos.

3 comentarios en «Cómo personalizar listas (ListView) en Android Studio»

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

WhatsApp chat