Tarjetas – Staggered Grid Layout – Android Studio

Muchas veces hemos querido realizar este tipo de listado:

Staggered Grid Layout

Bueno muy atento y muchas ganar que en el siguiente tutorial te enseñare a realizar este tipo de listado en Android Studio.

  1.  Abrimos el android studio y creamos un nuevo proyecto vacio

2.- Una vez listo creado el nuevo proyecto, pasamos a importar las librerias necesarias para realizar el listado, para lo cual ingresamos en el build.gradle (Module:app) y dentro de dependencies inportamos las siguientes librerias de la siguiente manera:

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

seguidamente, compilamos el proyecto.

3.- En el activity_main.xml ingresamos y añadimos el siguiente código:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

recuerda que a nuestro listado (RecyclerView) lo hemos nombrado como recycler.

4.- Creamos una clase con los datos que va tener nuestra tarjeta, en caso nuestro estamos haciendo un listado de animales. La cual nuestra clase tendra como nombre Animal

public class Animal {
    
        private String nombre;
        private int foto;

        public Animal(String name, int foto) {
            this.nombre = name;
            this.foto = foto;
        }

        public String getNombre() {
            return nombre;
        }

        public void setNombre(String nombre) {
            this.nombre = nombre;
        }

        public int getFoto() {
            return foto;
        }

        public void setFoto(int foto) {
            this.foto = foto;
        }
}

5.- Ahora crearemos el diseño de la tarjeta que queremos realizar y que se visualice en nuestro listado, para lo cual creamos un nuevo archivo en el layout con el nombre animal_tarjeta.xml. A continuación copiamos el siguiente código en el archivo creado.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="8dp"
    android:layout_marginBottom="16dp">

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

        <ImageView
            android:id="@+id/animal_foto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/animal_nombre"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            android:textColor="#ffffff"
            android:layout_below="@+id/animal_foto"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:text="nombre animal"
            android:gravity="center_horizontal"
            android:layout_alignParentBottom="true"
            android:background="#468000"/>

    </RelativeLayout>

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

5.- Ahora creamos la clase AnimalesViewHolders la cual sirve como puente entre el diseño de las tarjetas y el recycleView. En esta nueva clase copiamos el siguiente código

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

public class AnimalesViewHolders extends RecyclerView.ViewHolder{

    public TextView animalNombre;
    public ImageView animalFoto;

    public AnimalesViewHolders(View itemView) {
        super(itemView);
        animalNombre = (TextView) itemView.findViewById(R.id.animal_nombre);
        animalFoto = (ImageView) itemView.findViewById(R.id.animal_foto);
    }
    
}

6.- NO TE DESPERES YA FALTA POCO. Creamos una clase con el nombre AnimalesRecyclerViewAdapter la cual extenderá la clase RecyclerView. Para esto copia el siguiente código en la nueva clase creada

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;


public class AnimalesRecyclerViewAdapter extends RecyclerView.Adapter<AnimalesViewHolders> {

 private List<Animal> itemList;
 private Context context;

 public AnimalesRecyclerViewAdapter(Context context, List<Animal> itemList) {
 this.itemList = itemList;
 this.context = context;
 }

 @Override
 public AnimalesViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
 View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.animal_tarjeta, null);
 AnimalesViewHolders avh = new AnimalesViewHolders(layoutView);
 return avh;
 }

 @Override
 public void onBindViewHolder(AnimalesViewHolders holder, int position) {
 holder.animalNombre.setText(itemList.get(position).getNombre());
 holder.animalFoto.setImageResource(itemList.get(position).getFoto());
 }

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

7.- Ahora debes cargar imagenes en el drawable para que se vea en la tarjeta. Para lo cual puedes descargar imagenes de internet o alguna que tenga.

8.- Ahora trabajaremos en el MainActivity. Para lo cual copiamos en siguiente código

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

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

public class MainActivity extends AppCompatActivity {

    private StaggeredGridLayoutManager staggeredGridLayoutManager;

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

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

        staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, 1);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);

        List<Animal> lista_Animal = cargarDatos();

        AnimalesRecyclerViewAdapter adaptador = new AnimalesRecyclerViewAdapter(MainActivity.this, lista_Animal);
        recyclerView.setAdapter(adaptador);

    }


    private List<Animal> cargarDatos(){
        List<Animal> listViewItems = new ArrayList<Animal>();
        listViewItems.add(new Animal("elefante", R.drawable.elefante));
        listViewItems.add(new Animal("gato", R.drawable.gato));
        listViewItems.add(new Animal("jirafa", R.drawable.jirafa));
        listViewItems.add(new Animal("leon", R.drawable.leon));
        listViewItems.add(new Animal("perro", R.drawable.perro));

        return listViewItems;
    }
}

9.- Finalmente procedemos a correr nuestra aplicación, y nos quedará algo así. Alguna duda que tengas no dudes en escribir en los comentarios y segirnos en nuestras 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 *