¿Quieres personalizar listas o listView en Android Studio? Si estás iniciándote en la programación para los dispositivos del androide verde puede que te estés preguntando cómo crear un adapter personalizado en Android Studio, 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 contaros cómo lanzar un segundo activity, crear un adapter personalizado en Android Studio será coser y cantar y nos permitirá dar a nuestra app una nueva forma de mostrar la información contenida en nuestros almacenes de datos, 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 en la que mostraremos un ImageView y dos TextView.
Primero te aconsejamos 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
Para hacer esto primero crearemos un nuevo fichero en la carpeta Res > Layout, haciendo clic derecho sobre ella y seleccionando la opción de New > Layout resource file. Nosotros vamos a llamarle “item_category” para tener una forma cómoda de contaros el proceso.
Una vez creado, en el visor de Android Studio añadiremos dos TextView y un ImageView siguiendo un patrón similar a la imagen siguiente, aunque podemos crear tantos campos como nosotros deseemos.
Este el el código XML de nuestro “item_category.xml”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/background_light"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Texto Frase" android:id="@+id/texto" android:layout_below="@+id/category" android:layout_toRightOf="@+id/imageView4" android:layout_toEndOf="@+id/imageView4" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Titulo Frase" android:id="@+id/category" android:textSize="21sp" android:textColor="#f65034" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/imageView4" android:layout_toEndOf="@+id/imageView4" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginRight="4dp" android:layout_marginBottom="2dp" android:layout_marginTop="2dp" android:id="@+id/imageView4" android:cropToPadding="false" android:src="@drawable/iniciocomillas" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:layout_alignBottom="@+id/texto" android:maxHeight="35dp" android:maxWidth="74dp" android:adjustViewBounds="true" /> </RelativeLayout> |
Como puedes ver, nosotros tenemos en el ImageView el atributo “android:src” que indica que la imagen se encuentra en la carpeta drawable con el nombre “iniciocomillas”.
Una vez hecho esto, vamos a crear un ListView en nuestro “activity_main.xml” y que será precisamente el que vayamos a personalizar a partir de ahora.
Después de haber creado el ListView en la actividad principal, vamos a crear una nueva clase llamada “Category”, que representará cada uno de los items de la lista, en nuestra carpeta Java con el siguiente código fuente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
package aa.designers.adapter.ejemplo; import android.graphics.drawable.Drawable; public class Category { private String title; private String categoryId; private String description; private Drawable imagen; public Category() { super(); } public Category(String categoryId, String title, String description, Drawable imagen) { super(); this.tittle = title; this.description = description; this.imagen = imagen; this.categoryId = categoryId; } public String getTitle() { return title; } public void setTittle(String title) { this.title = title; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Drawable getImage() { return imagen; } public void setImagen(Drawable imagen) { this.imagen = imagen; } public String getCategoryId(){return categoryId;} public void setCategoryId(String categoryId){this.categoryId = categoryId;} } |
Y después otro fichero Java con el nombre “AdapterCategory” con el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
package aa.designers.adapter.ejemplo; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; public class AdapterItem extends BaseAdapter { protected Activity activity; protected ArrayList<Category> items; public AdapterItem (Activity activity, ArrayList<Category> items) { this.activity = activity; this.items = items; } @Override public int getCount() { return items.size(); } public void clear() { items.clear(); } public void addAll(ArrayList<Category> category) { for (int i = ; i < category.size(); i++) { items.add(category.get(i)); } } @Override public Object getItem(int arg0) { return items.get(arg0); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; if (convertView == null) { LayoutInflater inf = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = inf.inflate(R.layout.item_category, null); } Category dir = items.get(position); TextView title = (TextView) v.findViewById(R.id.category); title.setText(dir.getTittle()); TextView description = (TextView) v.findViewById(R.id.texto); description.setText(dir.getDescription()); ImageView imagen = (ImageView) v.findViewById(R.id.imageView); imagen.setImageDrawable(dir.getImage()); return v; } } |
Como podemos ver, la clase Category representa cada uno de los elementos de nuestra lista y la clase AdapterCategory será la encargada de visualizar los elementos a nuestro gusto en la lista. Este adapter personalizado extiende la clase BaseAdapter, uno de las adaptadores más básicos pero muy personalizables.
En esta clase podemos encontrar varios puntos importantes:
- Los métodos getItem y getItemId son necesarios para obtener cada uno de los items de la lista y utilizarlos más adelante para interactuar con ellos.
- El método getCount nos proporciona el número de elementos de los que consta nuestro ArrayList
- El método clear limpia el array de datos.
- El método getView es el más importante, y será el encargado de “inflar” o personalizar nuestra lista.
¿Y ahora cómo muestro los elementos de mi ArrayList?
Ahora es el turno de mostrar todos los elementos de nuestro ArrayList en nuestro adapter personalizado. Podemos hacerlo de la siguiente manera:
Dentro de nuestro código fuente tenemos un ArrayList con la siguiente estructura:
|
1 |
ArrayList<Category> category = new ArrayList<Category>(); |
Para mostrar todos sus elementos en el ListView de nuestro “activity_main.xml” tenemos que crear el adaptador:
|
1 2 3 4 5 |
ListView lv = (ListView) findViewById(R.id.listView); AdapterCategory adapter = new AdapterCategory(this, category); lv.setAdapter(adapter); |
NOTA: Una buena opción es poner este código en el método OnCreate.
Si queremos interactuar con los elementos de nuestro ListView una interesante manera es la siguiente:
|
1 2 3 4 5 6 7 8 |
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { final int pos = position; //CODIGO AQUI } }); |
¿Qué te parece este adapter personalizado en Android Studio? ¿Te ha servido este artículo para crear tu lista personalizada en Android Studio?
Dentro del AdapterCategory.java en la instrucción
v = inf.inflate(R.layout.item_category, null);
¿que es item_category?
Vuelve a revisar el código, ponía item_adapter por error ! Es item_category.xml (o el nombre que le hayas dado claro). Un saludo
una pregunta, la instruccion
ArrayList category = new ArrayList();
¿En donde quedaria, en el adaptador en el activity main?
una pregunta, la instruccion
ArrayList category = new ArrayList();
¿En donde quedaria, en el adaptador o en el activity main?
Hola, la app se ejecuta sin problemas, sin embargo con la lista vacía, donde o cómo la lleno?
buenas estaba en las misma pero ya revisando todo encontré la solución. debes intanciar un objeto de la clase Category donde envias los valores a travez del constructor, luego debes agregar el objeto de la instancia al ArrayList categor, de éste modo se te mostrarán los datos.
Disculpa,No tengo mucho COnocimiento Sobre esto.
Me podiras explicar como Puedo Instanciar estos Objeots?
Para llamar getItem(pos) del adaptador desde onItemClick() cómo haría? me da error de que no puedo llamar un método no estático desde un contexto estático.
Buen día, estaba siguiendo los pasos de este tutorial pero no púde hacerlo funcionar me genera varios errores. perdí el tiempo en este tutorial y en vez de aclararme el tema me dejó mas confundido, por favor no consideren que algúnos pasos son obvios para todos los que entramos a esta página de tutoriales, les recomiendo no saltarse nada para que quede claro.
el codigo como tal tiene detalles, pero si tienes alguna idea de lo que esta haciendo y no solo “copiar y pegar” te sirve para personalizar, lo unico es que al final no deja explicito como se llena la lista.
no funciona, nomas tira errores .-.
El código tiene varios errores “de dedo” como “title” en una clase y “tittle” en otra.
Para llenar la lista probar con esto:
Drawable res = getResources().getDrawable(R.drawable.ic_green);
items.add(new Category(“1”, “Servicio 1”, “Prioridad Alta”, res));
Donde ic_green es un archivo png que se encuentra en res -> drawable (pueden reemplazarlo por cualquier otra imagen)
items es un ArrayList de elementos “Category”
Salu2
list_marca=(ListView) findViewById(R.id.lista_marca); //Inicializamos el ListView
Drawable respi = getResources().getDrawable(R.drawable.marcado); //Instanciamos una imagen ubicada en drawable
Category cat=new Category(“1″,”Frases”,”Amor”,respi); //colocamos los valores en el constructor de category
ArrayList category = new ArrayList(); //instanciamos el arrayList que va a ir el el AdapterCategory
category.add(cat); //Agregamos la variable cat instanciada mas arriba al arrayList
AdapterCategory adapter = new AdapterCategory(this, category);
list_marca.setAdapter(adapter);
Espero y les sirva
solo me falta que muestre los datos………………………
No supe donde poner
ListView lv = (ListView) findViewById(R.id.listView);
AdapterCategory adapter = new AdapterCategory(this, category);
lv.setAdapter(adapter);
para que se vea la lista. y para dar clic y me envie a una activity como le hago? Todo esta bien solo me falta que se vea.
Excelente Adrian. Tengo otra consulta, ¿cómo puedo ahora, en el método onItemClick, obtener los valores de los items que contienen cada fila?.
Desde ya muchas gracias