Como crear un RecyclerView en Android

Android RecyclerView Example

Hola amigos  en este día traemos un nuevo tutorial el cual sera aprender a utilizar el RecyclerView es un control que nos ayudara a mejorar la visualización de nuestra aplicación. Sigue este tutorial paso a paso para aprender a crear un RecyclerView.

Crear Proyecto Android (Aquí)

Crearemos nuestro proyecto para desarrollar este ejemplo del RecyclerView.

RecyclerView Layot Design

Crearemos el diseño de nuestra aplicación y nuestro RecyclerView es de la siguiente forma. Agregaremos una dependencia antes que todo para poder utilizar el RecyclerView.

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

En el archivo build.gradle (Module:app).
Ahora continuamos con el diseño de nuestro RecyclerView y abriremos el main_activity.xml.

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/grey_300"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true">

Este control nos permite dar una apariencia un bastante buena a nuestras aplicaciones deberán añadirla a sus aplicaciones. Si ven el control tiene dos propiedades que permiten modificarlo y son.

card_view: cardCornerRadius: se usa para establecer el radio de la esquina en nuestros diseños
card_view: cardBackgroundColor: se usa para establecer el color de fondo de la vista

Utilizaremos este RecyclerView junto con el CardView para mostrar una lista de elementos junto con una imagen.

Android RecyclerView and CardView Example

En el main_activity.xml colocaremos los siguientes controles.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity"
 android:background="#c1c1c1"
 >

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

</RelativeLayout>

Añadiremos un nuevo card_layout.xml.

<?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="vertical"
 android:tag="cards main container">

 <android.support.v7.widget.CardView
 android:id="@+id/cardView"
 xmlns:card_view="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 card_view:cardBackgroundColor="@color/color_white"
 card_view:cardCornerRadius="10dp"
 card_view:cardElevation="5dp"
 card_view:cardUseCompatPadding="true">

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 >

 <ImageView
 android:id="@+id/imageView"
 android:tag="image_tag"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:layout_weight="1"
 android:src="@drawable/ic_launcher"/>

 <LinearLayout
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginTop="12dp"
 android:layout_weight="2"
 android:orientation="vertical"
 >

 <TextView
 android:id="@+id/txtViewName"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:layout_marginTop="10dp"
 android:text="Android Name"
 android:textAppearance="?android:attr/textAppearanceLarge"/>

 <TextView
 android:id="@+id/txtViewVersion"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:layout_marginTop="10dp"

 android:text="Android Version"
 android:textAppearance="?android:attr/textAppearanceMedium"/>

 </LinearLayout>
 </LinearLayout>

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

</LinearLayout>

En la carpeta menu - menu_main.xml agregaremos el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:context=".MainActivity">
<item android:id="@+id/add_item"
android:title="Add"
android:orderInCategory="100"
app:showAsAction="always"/>

</menu>

Con esto tendríamos listo el diseño de nuestra aplicación y podemos seguir con el código de nuestras clases Java.

RecyclerView Code Example

Primero agregaremos una clase a la cual llamaremos DataModel. Y nos quedaría con el siguiente código.

public class DataModel {

 String name;
 String version;
 int id_;
 int image;

 public DataModel(String name, String version, int id_, int image) {
 this.name = name;
 this.version = version;
 this.id_ = id_;
 this.image=image;
 }

 public String getName() {
 return name;
 }

 public String getVersion() {
 return version;
 }

 public int getImage() {
 return image;
 }

 public int getId() {
 return id_;
 }
}

Luego añadiremos una clase a la cual llamaremos MyDatas.

public class MyDatas {

 static String[] nameArray = {"Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice Cream Sandwich","JellyBean", "Kitkat", "Lollipop", "Marshmallow"};
 static String[] versionArray = {"1.5", "1.6", "2.0-2.1", "2.2-2.2.3", "2.3-2.3.7", "3.0-3.2.6", "4.0-4.0.4", "4.1-4.3.1", "4.4-4.4.4", "5.0-5.1.1","6.0-6.0.1"};

 static Integer[] drawableArray = {R.drawable.cupcake, R.drawable.donut, R.drawable.eclair,
 R.drawable.froyo, R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.ics,
 R.drawable.jellybean, R.drawable.kitkat, R.drawable.lollipop,R.drawable.marsh};

 static Integer[] id_ = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
}

Y por ultimo agregaremos un CustomAdapter.

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.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {

 private ArrayList<DataModel> dataSet;

 public static class MyViewHolder extends RecyclerView.ViewHolder {

 TextView textViewName;
 TextView textViewVersion;
 ImageView imageViewIcon;

 public MyViewHolder(View itemView) {
 super(itemView);
 this.textViewName = (TextView) itemView.findViewById(R.id.txtViewName);
 this.textViewVersion = (TextView) itemView.findViewById(R.id.txtViewVersion);
 this.imageViewIcon = (ImageView) itemView.findViewById(R.id.imgView);
 }
 }

 public CustomAdapter(ArrayList<DataModel> data) {
 this.dataSet = data;
 }

 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent,
 int viewType) {
 View view = LayoutInflater.from(parent.getContext())
 .inflate(R.layout.cards_layout, parent, false);

 view.setOnClickListener(MainActivity.myOnClickListener);

 MyViewHolder myViewHolder = new MyViewHolder(view);
 return myViewHolder;
 }

 @Override
 public void onBindViewHolder(final MyViewHolder holder, final int listPosition) {

 TextView textViewName = holder.textViewName;
 TextView textViewVersion = holder.textViewVersion;
 ImageView imageView = holder.imageViewIcon;

 textViewName.setText(dataSet.get(listPosition).getName());
 textViewVersion.setText(dataSet.get(listPosition).getVersion());
 imageView.setImageResource(dataSet.get(listPosition).getImage());
 }

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

Y para finalizar nos dirigimos al MainActivity para agregar el siguiente código.

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

 private static RecyclerView.Adapter adapter;
 private RecyclerView.LayoutManager layoutManager;
 private static RecyclerView recyclerView;
 private static ArrayList<DataModel> datas;
 static View.OnClickListener myOnClickListener;
 private static ArrayList<Integer> removedItems;

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

 myOnClickListener = new MyOnClickListener(this);

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

 layoutManager = new LinearLayoutManager(this);
 recyclerView.setLayoutManager(layoutManager);
 recyclerView.setItemAnimator(new DefaultItemAnimator());

 datas = new ArrayList<DataModel>();
 for (int i = 0; i < MyDatas.nameArray.length; i++) {
 datas.add(new DataModel(
 MyDatas.nameArray[i],
 MyDatas.versionArray[i],
 MyDatas.id_[i],
 MyDatas.drawableArray[i]
 ));
 }

 removedItems = new ArrayList<Integer>();

 adapter = new CustomAdapter(datas);
 recyclerView.setAdapter(adapter);
 }


 private static class MyOnClickListener implements View.OnClickListener {

 private final Context context;

 private MyOnClickListener(Context context) {
 this.context = context;
 }

 @Override
 public void onClick(View v) {
 removeItem(v);
 }

 private void removeItem(View v) {
 int selectedItemPosition = recyclerView.getChildPosition(v);
 RecyclerView.ViewHolder viewHolder
 = recyclerView.findViewHolderForPosition(selectedItemPosition);
 TextView textViewName
 = (TextView) viewHolder.itemView.findViewById(R.id.txtViewName);
 String selectedName = (String) textViewName.getText();
 int selectedItemId = -1;
 for (int i = 0; i < MyDatas.nameArray.length; i++) {
 if (selectedName.equals(MyDatas.nameArray[i])) {
 selectedItemId = MyDatas.id_[i];
 }
 }
 removedItems.add(selectedItemId);
 datas.remove(selectedItemPosition);
 adapter.notifyItemRemoved(selectedItemPosition);
 }
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
 super.onCreateOptionsMenu(menu);
 getMenuInflater().inflate(R.menu.menu_main, menu);
 return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 super.onOptionsItemSelected(item);
 if (item.getItemId() == R.id.add_item) {
 //check if any items to add
 if (removedItems.size() != 0) {
 addRemovedItemToList();
 } else {
 Toast.makeText(this, "Nothing to add", Toast.LENGTH_SHORT).show();
 }
 }
 return true;
 }

 private void addRemovedItemToList() {
 int addItemAtListPosition = 3;
 datas.add(addItemAtListPosition, new DataModel(
 MyDatas.nameArray[removedItems.get(0)],
 MyDatas.versionArray[removedItems.get(0)],
 MyDatas.id_[removedItems.get(0)],
 MyDatas.drawableArray[removedItems.get(0)]
 ));
 adapter.notifyItemInserted(addItemAtListPosition);
 removedItems.remove(0);
 }
}

Con esto nuestro ejemplo quedaría listo y podremos ver nuestro RecyclerView terminado.

Crear Emulador AVD

Crearemos un emulador para ver nuestro RecyclerView en funcion junto con el CardView.

Y listo con esto terminamos este ejemplo de RecyclerView y CardView. Si llegas a tener una duda por favor déjanos tu comentario.

Descargar

"Yo inventé el término "orientado a objetos, y puedo decirte que no tenía C + + en mente"
- Alan Kay