Listado – Crear un RecyclerView y CardViews – Android Studio

Muchas veces hemos querido crear un listado en Android Studio como se ve la siguiente figura

Bueno no esperes mucho y sigue los siguientes pasos:

1.- Creamos un nuevo proyecto

2.- Para iniciar comenzaremos importando las librerias CardView y RecyclerView en el build.gradle (Module:app) de las siguientes manera en las dependencies:

compile 'com.android.support:recyclerview-v7:26.+'
compile 'com.android.support:cardview-v7:26.+'

3.- Creamos ahora en el activity_main.xml el diseño del RecyclerView general de la siguiente manera:

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nuevo_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="3dp"
    android:scrollbars="vertical" />

4.- Seguidamente, pasamos a crear el diseño de un registro o listado en particular, para lo cual creamos un archivo en el layout con el nombre de card_listado.xml

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="4dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imagen_pais"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:scaleType="centerCrop" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/nombre_pais"
            android:layout_toRightOf="@+id/imagen_pais"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="30dp" />

    </RelativeLayout>
</android.support.v7.widget.CardView>

5.- Pasamos a crear una clase con el nombre pais el cual tendrá los datos del listado, como en el siguiente código

public class pais {

    private int imagen_pais;
    private String nombre_pais;

    public pais(int imagen_pais, String nombre_pais) {
        this.imagen_pais = imagen_pais;
        this.nombre_pais = nombre_pais;
    }

    public int getImagen_pais() {
        return imagen_pais;
    }

    public void setImagen_pais(int imagen_pais) {
        this.imagen_pais = imagen_pais;
    }

    public String getNombre_pais() {
        return nombre_pais;
    }

    public void setNombre_pais(String nombre_pais) {
        this.nombre_pais = nombre_pais;
    }
}

6.- Ahora pasamos a crear un adaptador para lo cual creamos una clase con el nombre paisAdapter y colocamos el siguiente código

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class paisAdapter extends RecyclerView.Adapter<paisAdapter.AnimeViewHolder> {
    private List<pais> items;

    public static class AnimeViewHolder extends RecyclerView.ViewHolder {

        public ImageView imagen_pais;
        public TextView nombre_pais;

        public AnimeViewHolder(View v) {
            super(v);
            imagen_pais = (ImageView) v.findViewById(R.id.imagen_pais);
            nombre_pais = (TextView) v.findViewById(R.id.nombre_pais);
        }
    }

    public paisAdapter(List<pais> items) {
        this.items = items;
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    @Override
    public AnimeViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.card_listado, viewGroup, false);
        return new AnimeViewHolder(v);
    }

    @Override
    public void onBindViewHolder(AnimeViewHolder viewHolder, int i) {
        viewHolder.imagen_pais.setImageResource(items.get(i).getImagen_pais());
        viewHolder.nombre_pais.setText(items.get(i).getNombre_pais());
    }
}

7.- FALTA MUY POCO, NO DESESPERES. Ahora en el MainActivity colocamos el siguiente código

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recycler;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager lManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List items = new ArrayList();

        items.add(new pais(R.drawable.peru, "Perú"));
        items.add(new pais(R.drawable.mexico, "México"));
        items.add(new pais(R.drawable.colombia, "Colombia"));
        items.add(new pais(R.drawable.spain, "España"));
        items.add(new pais(R.drawable.chile, "Chile"));

        recycler = (RecyclerView) findViewById(R.id.nuevo_recycler);
        recycler.setHasFixedSize(true);

        lManager = new LinearLayoutManager(this);
        recycler.setLayoutManager(lManager);

        adapter = new paisAdapter(items);
        recycler.setAdapter(adapter);

    }
}

8.- Finalmente, corremos las aplicaciones y tenemos el siguiente resultado

Si tienes alguna duda, porfavor escribenos abajo en los comentarios y siguenos en las redes sociales.

You May Also Like

About the Author: Jesús Guzmán

Estudiante de Ingeniería y amante de la Tecnología. Con un poco de código podemos cambiar el mundo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *