TechIcons

Introduccin

Este tutorial tiene por objetivos:

Aprender a presentar colecciones de elementos utilizando el componente RecyclerView.

Vincular RecyclerView con colecciones de elementos en memoria va RecyclerView.Adapter.
Utilizar CardView para presentar informacin de un elemento de la coleccin.
Implementar una experiencia basada en mltiples activities.
Acceder a recursos de imgenes estticas dentro del proyecto.

A travs de los siguientes pasos, crearemos una aplicacin en Android Studio que presente una lista de
personalidades del mundo de tecnologa (Tech Icons). Esta aplicacin permitir adems hacer touch
sobre uno de los elementos y presentar una vista que contenga mayor informacin sobre la persona
seleccionada, incluyendo su foto y una mini biografa.

La implementacin en Android de los principios de Google Material Design nos ofrece dos componentes
que permiten mejorar la presentacin y simplifican la labor de presentar informacin de colecciones de
elementos: RecyclerView y CardView.

Manos a la obra!

Creando el proyecto

Estando ubicados en la vista inicial de Android Studio seleccionamos la opcin Start a new Android
Studio project.

Ello nos llevar a la ventana con el ttulo Create New Project.

En dicha ventana colocamos la siguiente informacin en los campos indicados a continuacin.

Application Name: TechIcons

Company Domain: upc.edu.pe

De forma automtica se establece pe.edu.upc.techicons como nombre de package para la aplicacin.

Hacemos clic en Next.

En la siguiente vista de la ventana seleccionamos los dispositivos objetivo para la aplicacin. En nuestro
caso marcamos la casilla Phone and Tablet

Luego indicamos el nivel de API que utilizaremos como base mnima para la aplicacin:

Minimum SDK: API 18: Android 4.3 (Jelly Bean)

Si hacemos clic en la opcin Help me choose, notaremos que se muestra una vista con los niveles de
API y la lista de features de Android que se encuentran disponibles a partir de dicha versin.
Hacemos clic en Next

Se presentar en la siguiente vista una galera de Activities bajo el ttulo Add and Activity to Mobile. De
dicha galera seleccionamos Basic Activity.

Hacemos clic en Next.

Con ello se presenta la vista con el ttulo Customize the Activity. En los campos completamos los
siguientes valores:

Activity Name: MainActivity

Layout Name: activity_main

Title: Tech Icons

Menu Resource Name: menu_main.

Dejamos los dems campos en sus valores por defecto y presionamos el botn Finish.

En los siguientes pasos integraremos al proyecto las bibliotecas de widgets que necesitamos para
implementar la experiencia.

Adicionando el soporte para CardView

Para poder utilizar el widget CardView en el proyecto, necesitamos adicionar la biblioteca de Android que
lo contiene a nuestro proyecto.

En el men de Android Studio seleccionamos la opcin File -> Project Structure

En el dilogo Project Structure ubicamos en el panel de opciones de la izquierda la seccin Modules y

dentro de ella, seleccionamos la opcin app. A la derecha seleccionamos el tab Dependencies.
Notaremos que se muestra la relacin de bibliotecas que estn en este momento integradas al proyecto.
Hacemos clic en el botn + y seleccionamos del men contextual la opcin Library dependency.

En el dilogo Choose Library Dependency, escribimos el texto cardview y hacemos clic en el botn
buscar ( ). De la lista de resultados seleccionamos

com.android.support: cardview-v7

Hacemos clic en OK. De regreso en el dilogo Project Structure, hacemos clic en OK para cerrar dicho
dilogo. Observamos que el gestor de dependencias de Android, Gradle, realiza un proceso de
sincronizacin para descargar la biblioteca desde su repositorio por defecto e integrarla al proyecto. De
esta forma hemos integrado la biblioteca que necesitamos para poder utilizar el widget CardView en
nuestro proyecto.

Diseando la vista principal

A continuacin, vamos a modificar el layout de contenido de la vista principal, content_main.xml, para

incorporar el widget RecyclerView que presentar la coleccin de cards de Tech Icons.

Abrimos para modificacin el archivo content_main.xml. Debera verse de esta forma:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/content_main"
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"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="pe.edu.upc.techicons.MainActivity"
tools:showIn="@layout/activity_main">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>

</RelativeLayout>

Dentro de la etiqueta RelativeLayout, eliminamos el cdigo correspondiente al widget TextView,

colocando en su reemplazo el siguiente cdigo:

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

Guardamos el archivo content_main.xml.

Para esta experiencia no requerimos la presencia de un Floating Action Button, por lo que eliminaremos
del proyecto el cdigo asociado al mismo. Realizaremos modificaciones en el archivo activity_main.xml
y en MainActivity.java. Primero, abrimos para edicin el archivo activity_main.xml.

Ubicamos el siguiente bloque de cdigo:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email"/>

Seleccionamos dicho bloque de cdigo y procedemos a eliminarlo con Ctrl-X (Cmd-X en Mac) y
guardamos la nueva versin del archivo activity_main.xml.

Ahora abrimos para edicin el archivo MainActivity.java, que se encuentra en el rbol del proyecto,
dentro de app/java/pe.edu.upc.techicons. En dicho archivo ubicamos el siguiente bloque de cdigo
dentro del mtodo onCreate().
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

Seleccionamos dicho bloque de cdigo y lo eliminamos. Guardamos la nueva versin del archivo
MainActivity.java.

Ahora retornamos al archivo content_main.xml y seleccionamos la pestaa design del editor.

Deberamos ver el diseo del layout de esta forma.

Adicionando recursos al proyecto

En el explorador del sistema operativo, descomprimimos en una carpeta el contenido del archivo
techicons_faces_images.zip.

En Android Studio, seleccionamos la vista Project, haciendo clic en seccin de ttulo Android del rbol
del proyecto y seleccionando Project.
Desde la carpeta origen del sistema operativo, seleccionamos todos los archivos de imagen y los
copiamos al portapapeles con Ctrl-C (o Cmd-C en Mac). A continuacin en Android Studio
seleccionamos el nodo drawable del rbol de proyectos, dentro de app/main/res. Hacemos clic derecho
sobre el nodo drawable y seleccionamos Paste del men contextual. En el dilogo Copy verificamos que
en el campo To directory: est la ruta de la carpeta drawable de nuestro proyecto y hacemos clic en OK.

Retornamos el rbol de proyecto a la vista Android haciendo clic en la cabecera y seleccionando

Android. Notaremos que se aprecia dentro de la carpeta drawable los archivos de imagen:

face_bill_gates.jpg

face_larry_ellison.jpg

face_mark_zuckerberg.jpg

face_steve_jobs.jpg

face_steve_wozniak.jpg

De esta forma hemos incorporado los recursos de imgenes al proyecto.

A continuacin adicionaremos recursos de strings con los nombres, cargos, compaas y mini biografas
de los conos.

Para ello, abrimos el archivo techicons_string_resources.txt y copiamos el contenido al portapapeles.

A continuacin en Android Studio abrimos el archivo strings.xml, ubicado en app/res/values. Dentro de
l insertamos una nueva lnea y pegamos el contenido del portapaleles, con lo que debera apreciarse de
la siguiente manera.

<resources>
<string name="app_name">TechIcons</string>
<string name="action_settings">Settings</string>
<string name="name_bill_gates">Bill Gates</string>
<string name="name_larry_ellison">Larry Ellison</string>
<string name="name_mark_zuckerberg">Mark Zuckerberg</string>
<string name="name_steve_jobs">Steve Jobs</string>
<string name="name_steve_wozniak">Steve Wozniak</string>
<string name="title_ceo">CEO</string>
<string name="title_ceo_and_founder">CEO &amp; Founder</string>
<string name="title_former_ceo_and_founder">Former CEO &amp; Founder</string>
<string name="title_cto">CTO</string>
<string name="title_co_founder">Co-Founder</string>
<string name="company_microsoft">Microsoft Corp.</string>
<string name="company_apple">Apple, Inc.</string>
<string name="company_oracle">Oracle Corp.</string>
<string name="company_facebook">Facebook, Inc.</string>
<string name="bio_bill_gates">Bill Gates and his partner Paul Allen built the
world\'s largest software business, Microsoft.</string>
<string name="bio_larry_ellison">Lawrence Joseph \"Larry\" Ellison (born August
17, 1944) is an American internet entrepreneur, businessman and philanthropist. He
serves as executive chairman and chief technology officer of Oracle Corporation,
having previously been chief executive from its founding until September 2014. In
2014, he was listed by Forbes magazine as the third-wealthiest man in America and as
the fifth-wealthiest person in the world, with a fortune of US$56.2 billion.</string>
 <string name="bio_mark_zuckerberg">Mark Zuckerberg was the Harvard computer
science student who along with a few friends launched the world\'s most popular social
networking website called Facebook in February 2004.</string>
<string name="bio_steve_jobs">Steve Jobs met Steve Wozniak while in high school
and in 1976, they started Apple Computers. Jobs oversaw the development of
revolutionary products like the iPhone and iPad.</string>
<string name="bio_steve_wozniak">Steve Wozniak is the co-founder of Apple
Computers. Wozniak has always been credited with being the main designer of the first
Apples.</string>
</resources>

Guardamos el archivo strings.xml.

Diseando la vista About Icon

Procedemos a crear la vista About Icon. Para ello en el Men seleccionamos File -> New - > Activity y
seleccionamos el tipo de Activity con el nombre Basic Activity.

Esta actividad se presentar al usuario cuando ste seleccione uno de los elementos de la coleccin en
MainActivity. Cuando el usuario se encuentre en IconActivity y seleccione la opcin de ir hacia atrs, el
foco debera pasar nuevamente a MainActivity.

En el dilogo New Android Activity colocamos los siguientes valores en los campos.

Activity Name: IconActivity

Layout Name: activity_icon

Title: About Icon

Hierarquical Parent: pe.edu.upc.techicons.MainActivity

Dejamos los dems valores por defecto y hacemos clic en Finish.

Al igual que MainActivity, no requerimos de un Floating Action Button, por lo que eliminaremos del
proyecto el cdigo asociado al mismo. Realizaremos modificaciones en el archivo activity_icon.xml y en
IconActivity.java. Primero, abrimos para edicin el archivo activity_icon.xml.

Ubicamos el siguiente bloque de cdigo:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email"/>

Seleccionamos dicho bloque de cdigo y procedemos a eliminarlo con Ctrl-X (Cmd-X en Mac) y
guardamos la nueva versin del archivo activity_icon.xml.

Ahora abrimos para edicin el archivo IconActivity.java, que se encuentra en el rbol del proyecto,
dentro de app/java/pe.edu.upc.techicons. En dicho archivo ubicamos el siguiente bloque de cdigo
dentro del mtodo onCreate().

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

Seleccionamos dicho bloque de cdigo y lo eliminamos. Guardamos la nueva versin del archivo
IconActivity.java.

A continuacin abrimos para edicin content_icon.xml y seleccionamos la pestaa Text para que se
muestre el editor de cdigo del layout.

Nuestro objetivo es que el usuario visualice un card que contenga la imagen de la persona, debajo el
nombre, cargo y empresa. Luego un poco ms abajo debera visualizar la mini biografa. Para ello
escribimos el siguiente cdigo dentro de la etiqueta RelativeLayout.

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="1dp"
app:cardCornerRadius="4dp"
android:id="@+id/personCardView">

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

Este cdigo permitir mostrar en la UI un card que ocupe la totalidad de las dimensiones del dispositivo,
con un ligero ngulo redondeado en cada esquina del card.

Dentro de la etiqueta CardView, vamos a colocar las etiquetas que permitan presentar la informacin
organizada de forma vertical, donde se vea la imagen del cono, luego el nombre, cargo, compaa y mini
biografa. La imagen y los textos ocuparn el ancho del rea de visualizacin disponible. Para el caso de
la imagen su altura tendr un valor fijo de 240dp, mientras que los textos tendrn una altura determinada
por su contenido. Deseamos que, con excepcin de la mini biografa, todos los textos estn en negrita.
Adicionalmente queremos que el texto del nombre tenga un tamao ligeramente mayor que los dems
textos. Por otro lado, daremos un margen de unos 10dp con respecto a los bordes del conjunto de
campos y un margen superior de 10dp para la mini biografa.

A fin de cumplir con esos requisitos de diseo, adicionamos el siguiente cdigo dentro de la etiqueta
CardView.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical">
<ImageView
 android:layout_width="match_parent"
android:layout_height="240dp"
android:src="@drawable/face_steve_jobs"
android:id="@+id/pictureImageView"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/name_steve_jobs"
android:gravity="center_horizontal"
android:textStyle="bold"
android:textSize="18dp"
android:id="@+id/nameTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/title_former_ceo_and_founder"
android:gravity="center_horizontal"
android:textStyle="bold"
android:id="@+id/titleTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/company_apple"
android:gravity="center_horizontal"
android:textStyle="bold"
android:id="@+id/companyTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/bio_steve_jobs"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"
android:id="@+id/bioTextView"/>
</LinearLayout>
</LinearLayout>

Si hacemos clic en la pestaa Design, el layout debera verse como sigue.

Guardamos el archivo content_icon.xml.

Creando el layout para los elementos de la coleccin

Es necesario que definamos la estructura de presentacin de cada elemento en la coleccin. Para ello
utilizaremos nuevamente el widget CardView, pero esta vez dentro de un layout personalizado para
contener los datos de un cono en la coleccin. Posteriormente veremos cmo este layout se utiliza en
tiempo de ejecucin para poblar el RecyclerView.

Nos ubicamos en la seccin layout del nodo res en el rbol del proyecto. Sobre eso hacemos clic
derecho y seleccionamos New -> Layout resource file. Establecemos el valor de card_person para File
name: y android.support.v7.widget.CardView para Root element: Dejamos los dems campos con los
valores por defecto y hacemo clic en OK.

Abrimos el archivo card_person.xml para edicin y seleccionamos la pestaa Text para activar el editor
de cdigo. Encontraremos dentro de dicho archivo la etiqueta CardView de esta forma:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

Sobre dicha etiqueta realizamos las modificaciones de tal forma que se vea como sigue:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp"
android:id="@+id/personCardView">

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

Con ello hemos establecido un margen de 5dp, un efecto de ngulo redondeado de 4dp de radio y el id
de personCardView el cual requerimos para poder referenciar al widget en nuestros bloques de cdigo.

Dentro del CardView, nos corresponde ahora colocar las etiquetas que presentarn la informacin de
resumen para cada persona en la coleccin, junto con aquellas etiquetas que nos ayudarn a organizar
el contenido en el card. Para ello, adicionamos las siguientes sentencias dentro de la etiqueta CardView.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/face_steve_jobs"
android:id="@+id/pictureImageView"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/name_steve_jobs"
android:textStyle="bold"
android:layout_marginBottom="20dp"
android:id="@+id/nameTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/title_former_ceo_and_founder"
android:id="@+id/titleTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/company_apple"
android:id="@+id/companyTextView"/>
</LinearLayout>
</LinearLayout>

Si hacemos clic en la pestaa Design, deberamos apreciar el diseo de esta forma.

Guardamos el archivo card_person.xml.

Creando el Backend

Ahora que tenemos la interfaz de la aplicacin, nos enfocamos en las clases relacionadas con la
informacin.

En el rbol de la aplicacin, nos ubicamos en el paquete por defecto pe.edu.upc.techicons y hacemos

clic derecho. Del men contextual seleccionamos New -> Java Class.

En el dilogo Create New Class, colocamos Person en Name: y dejamos los dems valores por defecto,
haciendo clic en OK.

Modificamos el cdigo de la clase Person de tal forma que se aprecie de la siguiente manera.

public class Person {

private String name;
private String title;
private String company;
private String bio;
private int pictureId;

public Person(String name, String title, String company, String bio, int pictureId)
{
this.bio = bio;
this.company = company;
this.name = name;
this.pictureId = pictureId;
 this.title = title;
}

public String getName() { return name; }

public void setName(String name) { this.name = name; }

public String getTitle() { return title; }

public void setTitle(String title) { this.title = title; }

public String getCompany() { return company; }

public void setCompany(String company) { this.company = company; }

public String getBio() { return bio; }

public void setBio(String bio) { this.bio = bio; }

public int getPictureId() { return pictureId; }

public void setPictureId(int pictureId) { this.pictureId = pictureId; }

}

De esta forma, contamos con una clase Person que soporta los atributos de name, title, company, bio y
picture, junto con accesores para cada atributo y un constructor que permite establecer valores para
todos los atributos. Guardamos el archivo Person.java.

A continuacin, creamos una clase que encapsule la generacin de la coleccin de elementos y nos
proporcione un mtodo para obtener dicha informacin. Llamaremos a dicha clase PeopleService.

Del mismo modo como generamos la clase Person, nos ubicamos en el paquete por defecto y con click
derecho seleccionamos New -> Java Class. En el dilogo Create New Class, colocamos en Name: el
valor PeopleService y dejamos los dems atributos con sus valores por defecto. Finalizamos el dilogo
con OK.

Sobre el archivo de clase generado, adicionamos el siguiente bloque de cdigo, de tal forma que se
aprecie como sigue.

public class PeopleService {

private List<Person> people;

public List<Person> getPeople() { return people; }

public PeopleService(Context context) {

Resources res = context.getResources();
people = new ArrayList<>();
people.add(new Person(res.getString(R.string.name_bill_gates),
res.getString(R.string.title_former_ceo_and_founder),
res.getString(R.string.company_microsoft),
res.getString(R.string.bio_bill_gates),
R.drawable.face_bill_gates));
people.add(new Person(res.getString(R.string.name_larry_ellison),
res.getString(R.string.title_cto),
res.getString(R.string.company_oracle),
res.getString(R.string.bio_larry_ellison),
R.drawable.face_larry_ellison));
 people.add(new Person(res.getString(R.string.name_mark_zuckerberg),
res.getString(R.string.title_ceo),
res.getString(R.string.company_facebook),
res.getString(R.string.bio_mark_zuckerberg),
R.drawable.face_mark_zuckerberg));
people.add(new Person(res.getString(R.string.name_steve_jobs),
res.getString(R.string.title_former_ceo_and_founder),
res.getString(R.string.company_apple),
res.getString(R.string.bio_steve_jobs),
R.drawable.face_steve_jobs));
people.add(new Person(res.getString(R.string.name_steve_wozniak),
res.getString(R.string.title_co_founder),
res.getString(R.string.company_apple),
res.getString(R.string.bio_steve_wozniak),
R.drawable.face_steve_wozniak));
}
}

Como observamos, tenemos ahora una clase con un constructor que se encarga de poblar una coleccin
de personas con la informacin que hemos incorporado previamente al proyecto, junto con un mtodo
getPeople() que brinda acceso a dicha coleccin. Guardamos el archivo PeopleService.java.

Conectando los datos con la vista

RecylerView es el widget que utilizaremos para presentar la informacin de la coleccin de conos de

tecnologa, sin embargo este widget es independiente de la estructura que contenga los datos y no
interacta directamente con ella. La interaccin con la fuente de datos recae en otra clase que
implemente el patrn Adapter y sea descendiente de RecyclerView.Adapter. En adicin a ello, nuestra
clase debe contener la definicin de otra clase que sea descendiente de RecyclerView.ViewHolder.
Como su nombre lo indica, dicha clase representa el vnculo con la vista para cada elemento de la
coleccin.

Comenzamos creando la clase PeopleAdapter aplicando los mismos pasos que para el caso de Person y
PeopleService.

Una vez creada la clase deberamos ver el cdigo de la misma como sigue.

public class PeopleAdapter {

}

Procedemos a modificar el cdigo de tal forma que quede de la siguiente manera.

public class PeopleAdapter extends RecyclerView.Adapter<PeopleAdapter.ViewHolder> {

@Override
public PeopleAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}

@Override
public void onBindViewHolder(PeopleAdapter.ViewHolder holder, int position) {

@Override
 public int getItemCount() {
return 0;
}

public class ViewHolder extends RecyclerView.ViewHolder {

public ViewHolder(View itemView) {
super(itemView);
}
}
}

Como observamos para completer esta implementacin debemos escribir el cdigo de los mtodos
onCreateViewHolder(), onBindViewHolder() y getItemCount(). Adicionalmente necesitamos implementar
el contructor de la clase PeopleAdapter.ViewHolder.

Comenzaremos por este ltimo, el constructor de ViewHolder. Para ello necesitamos definir atributos que
sean la contraparte de los widgets de informacin de presentan los datos de una persona. Dichos
atributos debern vincularse con los widgets en el constructor. Modificamos la declaracin de la clase
ViewHolder de tal forma que se aprecie segn las siguientes lneas.

public class ViewHolder extends RecyclerView.ViewHolder {

CardView personCardView;
ImageView pictureImageView;
TextView nameTextView;
TextView titleTextView;
TextView companyTextView;

public ViewHolder(View itemView) {

super(itemView);
personCardView = (CardView) itemView.findViewById(R.id.personCardView);
pictureImageView = (ImageView) itemView.findViewById(R.id.pictureImageView);
nameTextView = (TextView) itemView.findViewById(R.id.nameTextView);
titleTextView = (TextView) itemView.findViewById(R.id.titleTextView);
companyTextView = (TextView) itemView.findViewById(R.id.companyTextView);
}
}

Como podemos ver, hemos adicionado un atributo que representa al CardView, as como atributos que
representan los widgets que agregamos dentro del CardView. En el constructor estamos inicializando
dichos atributos con referencias a los widgets.

Corresponde ahora que establezcamos un atributo para contener los elementos que se presentarn va
el RecyclerView. Adicionamos las siguientes lneas debajo de la sentencia de declaracin de la clase
PeopleAdapter, antes del primer @Override.

List<Person> people;

public void setPeople(List<Person> people) { this.people = people; }

El list people contendr entonces los objetos Person cuya informacin mostraremos como una lista en la
interfaz de usuario. Hemos adicionado un accesor para delegar al exterior y no a esta clase la
responsabilidad de poblar la coleccin. Esta clase slo debe recibir el valor de la coleccin va un mtodo
accesor.

Ahora que contamos con people, podemos implementar el mtodo getItemCount(). Modificamos el
cuerpo de dicho mtodo para que retorne la cantidad de elementos en la coleccin. Luego de los
cambios el mtodo debera quedar de esta forma.

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

Luego de esto, vamos a modificar el mtodo onCreateViewHolder() modificando el cuerpo del mtodo de
esta forma.

@Override
public PeopleAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(
LayoutInflater.from(parent.getContext())
.inflate(R.layout.card_person, parent, false));
}

En esta sentencia apreciamos el grado de importancia que tiene contar con card_person.xml el cual
creamos previamente. Notamos que la clase LayoutInflater se encarga de generar en tiempo de
ejecucin un objeto View con el diseo y widgets especificados en el archivo card_person.xml. Dicho
objeto View es tomado como parmetro en el constructor de ViewHolder, cuyo cdigo hemos
programado lneas arriba.

Slo nos queda en este clase completar el mtodo onBindViewHolder(). Este mtodo enlaza (bind) los
atributos del ViewHolder obteniendo su valor en base al elemento actual de en el RecyclerView, lo cual
viene como el parmetro position en el mtodo. Establecemos el siguiente cdigo para
onBindViewHolder.

@Override
public void onBindViewHolder(PeopleAdapter.ViewHolder holder, int position) {
holder.nameTextView.setText(people.get(position).getName());
holder.pictureImageView.setImageResource(people.get(position).getPictureId());
holder.titleTextView.setText(people.get(position).getTitle());
holder.companyTextView.setText(people.get(position).getCompany());

Este bloque de cdigo se ejecutar cada vez que RecyclerView requiera presentar un elemento de la
coleccin. Sin embargo, la experiencia que deseamos ofrecer al usuario contempla que cuando ste
seleccione un elemento de la lista, se presente el Activity IconActivity con la informacin completa de la
persona seleccionada. Completamos entonces el mtodo onBindViewHolder con las sentencias que
permitan implementar esa parte de la experiencia.

@Override
public void onBindViewHolder(PeopleAdapter.ViewHolder holder, final int position) {
holder.nameTextView.setText(people.get(position).getName());
holder.pictureImageView.setImageResource(people.get(position).getPictureId());
holder.titleTextView.setText(people.get(position).getTitle());
holder.companyTextView.setText(people.get(position).getCompany());
holder.personCardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
 Bundle bundle = new Bundle();
bundle.putInt("currentPosition", position);
Intent iconIntent = new Intent(view.getContext(), IconActivity.class);
iconIntent.putExtras(bundle);
view.getContext().startActivity(iconIntent);
}
});
}

Estableciendo el comportamiento de MainActivity

Ahora que tenemos los elementos implementados, nos concentramos en integrarlos para completar las
caractersticas de nuestra aplicacin. Abrimos para edicin el archivo MainActivity.java.

Dentro del cdigo de declaracin de la clase, adicionamos las siguientes lneas antes de la declaracin
del mtodo onCreate().

List<Person> people;
RecyclerView.LayoutManager peopleLayoutManager;
RecyclerView peopleRecyclerView;
PeopleAdapter peopleAdapter;

Con estos atributos ya declarados, nos corresponde implementar el comportamiento del Activity. Por ello
adicionamos las siguientes lneas antes de la llave de cierre del cuerpo del mtodo onCreate().

PeopleService service = new PeopleService(this);

people = service.getPeople();
peopleLayoutManager = new LinearLayoutManager(this);
peopleAdapter = new PeopleAdapter();
peopleAdapter.setPeople(people);
peopleRecyclerView = (RecyclerView) findViewById(R.id.peopleRecyclerView);
peopleRecyclerView.setLayoutManager(peopleLayoutManager);
peopleRecyclerView.setAdapter(peopleAdapter);

Como podemos observar, instanciamos un objeto service de la clase PeopleService, cuyo mtodo
getPeople() utilizamos para el parmetro que requiere el mtodo setPeople() del objeto peopleAdapter
que instanciamos. Tambin instanciamos un objeto LinearLayoutManager, el cual apoyar a
RecyclerView en la presentacin de los elementos como una lista lneal en la interfaz de usuario.
Finalmente, establecemos el vnculo entre peopleLayoutManager, peopleAdapter y
peopleRecyclerView a travs de sus mtodos setLayoutManager() y setAdapter().

En los siguientes pasos completaremos la experiencia implementando el comportamiento de IconActivity.

Implementando el comportamiento de IconActivity

A fin de implementar esta parte de la experiencia, requerimos primero declarar atributos para vincularlos
a los widgtes que presentarn la informacin de la persona seleccionada por el usuario en MainActivity.
Adicionamos las siguientes lneas dentro de la definicin de la clase IconActivity, antes de las
declaraciones de mtodos.

TextView nameTextView;
TextView titleTextView;
TextView companyTextView;
TextView bioTextView;
ImageView pictureImageView;

Luego procedemos a implementar el comportamiento. Comenzamos por establecer vnculos entre

atributos y widgets va llamadas al mtodo findViewById. Posteriormente instanciamos un objeto service
para obtener un objeto con la informacin de la persona actual. Finalmente establecemos los valores
para los widgets en funcin a la informacin que obtenemos de los accesores del objeto person.
Adicionamos las siguientes lneas al final del mtodo onCreate().

nameTextView = (TextView) findViewById(R.id.nameTextView);

titleTextView = (TextView) findViewById(R.id.titleTextView);
companyTextView = (TextView) findViewById(R.id.companyTextView);
bioTextView = (TextView) findViewById(R.id.bioTextView);
pictureImageView = (ImageView) findViewById(R.id.pictureImageView);
PeopleService service = new PeopleService(this);
Person person =
service.getPeople().get(getIntent().getExtras().getInt("currentPosition"));
nameTextView.setText(person.getName());
titleTextView.setText(person.getTitle());
companyTextView.setText(person.getCompany());
bioTextView.setText(person.getBio());
pictureImageView.setImageResource(person.getPictureId());

Con esto hemos completado la experiencia. Para ejecutar nuestro cdigo presionamos Ctrl-R (Cmd-R en
Mac) y seleccionamos un emulador o dispositivo fsico sobre el que se ejecutar la aplicacin. Podemos
apreciar que se presenta la vista MainActivity como sigue.
Si seleccionamos uno de los conos, por ejemplo a Mark Zuckerberg, veremos la vista IconActivity con la
informacin correspondiente.

De esta forma concluimos la experiencia.

En este tutorial hemos practicado lo siguiente:

Cmo implementar una experiencia con mltiples activities.

Cmo trabajar con RecyclerView y CardView.
Cmo utilizar recursos de imgenes en la aplicacin.
Retos
1. Agrege un SplashScreen a esta aplicacin que simplemente diga Cargando al
inicio de la aplicacin

Bibliografa
Creating Lists and Cards
http://developer.android.com/training/material/lists-cards.html