Portuguese (Português) translation by Maurício Eduardo de Oliveira (you can also view the original English article)
Se você estiver interessado em criar um aplicativo para Android que use listas para exibir dados, o Android Lollipop apresenta dois novos widgets para facilitar sua vida, RecyclerView
e CardView
. Usando esses widgets, é muito fácil dar ao seu aplicativo uma aparência que esteja em conformidade com as diretrizes mencionadas na especificação do material design do Google.
Pré-requisitos
Para acompanhar, você deve usar a versão mais recente do Android Studio. Você pode obtê-lo no site do desenvolvedor Android.
1. Suporte a Versões Antigas
Até o momento, menos de 2% dos dispositivos Android executavam o Android Lollipop. No entanto, graças à v7 Support Library, você pode usar os widgets RecyclerView
e CardView
em dispositivos que executam versões mais antigas do Android adicionando as seguintes linhas à seção de dependencies no arquivo build.grade do seu projeto:
compile 'com.android.support:cardview-v7:21.0.+' compile 'com.android.support:recyclerview-v7:21.0.+'
2. Criando um CardView
Um CardView
é um ViewGroup
. Como qualquer outro ViewGroup
, ele pode ser adicionado à sua Activity
ou Fragment
usando um arquivo XML de layout.
Para criar um CardView
vazio, você teria que adicionar o seguinte código ao XML do layout, conforme mostrado no snippet a seguir:
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.v7.widget.CardView>
Como um exemplo mais realista, vamos agora criar um LinearLayout
e colocar um CardView
dentro dele. O CardView
poderia representar, por exemplo, uma pessoa e conter o seguinte:
- um
TextView
para exibir o nome da pessoa - um
TextView
para exibir a idade da pessoa - um
ImageView
para exibir a foto da pessoa
É assim que o XML seria:
<?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:padding="16dp" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/cv" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_photo" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginRight="16dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_name" android:layout_toRightOf="@+id/person_photo" android:layout_alignParentTop="true" android:textSize="30sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_age" android:layout_toRightOf="@+id/person_photo" android:layout_below="@+id/person_name" /> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout>
Se esse XML for usado como o layout de uma Activity
, com os campos TextView
e ImageView
definidos como significativos, é assim que ele seria renderizado em um dispositivo Android:

3. Criando uma RecyclerView
Etapa 1: definindo-o em um layout
Usar uma instância do RecyclerView
é um pouco mais complicado. No entanto, defini-lo em um arquivo XML de layout é bem simples. Você pode defini-lo em um layout da seguinte maneira:
<android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/rv" />
Para obter um identificador para ele em sua Activity
, use o seguinte snippet:
RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
Se tiver certeza de que o tamanho da RecyclerView
não será alterado, você poderá adicionar o seguinte para melhorar o desempenho:
rv.setHasFixedSize(true);
Etapa 2: usando um LayoutManager
Ao contrário de um ListView
, um RecyclerView
precisa de um LayoutManager
para gerenciar o posicionamento de seus itens. Você pode definir seu próprio LayoutManager
, estendendo a classe RecyclerView.LayoutManager
. No entanto, na maioria dos casos, você poderia simplesmente usar uma das subclasses do LayoutManager
predefinidas:
LinearLayoutManager
GridLayoutManager
-
StaggeredGridLayoutManager
Neste tutorial, vou usar um LinearLayoutManager
. Esta subclasse LayoutManager
, por padrão, fará com que seu RecyclerView
se pareça com um ListView
.
LinearLayoutManager llm = new LinearLayoutManager(context); rv.setLayoutManager(llm);
Etapa 3: Definindo os dados
Assim como um ListView
, um RecyclerView
precisa de um adapter para acessar seus dados. Mas antes de criarmos um adapter, vamos criar dados com os quais possamos trabalhar. Crie uma classe simples para representar uma pessoa e, em seguida, escreva um método para inicializar um objeto List
de Person
:
class Person { String name; String age; int photoId; Person(String name, String age, int photoId) { this.name = name; this.age = age; this.photoId = photoId; } } private List<Person> persons; // This method creates an ArrayList that has three Person objects // Checkout the project associated with this tutorial on Github if // you want to use the same images. private void initializeData(){ persons = new ArrayList<>(); persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma)); persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery)); persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie)); }
Etapa 4: Criando um Adapter
Para criar um adapter que se possa usar no RecyclerView
, você deve estender o RecyclerView.Adapter
. Esse adaptador segue o padrão de design do view holder, o que significa que você define uma classe personalizada que estende RecyclerView.ViewHolder
. Esse padrão minimiza o número de chamadas para o método findViewById
.
Anteriormente neste tutorial, já definimos o layout XML para um CardView
que representa uma pessoa. Vamos reutilizar esse layout agora. Dentro do construtor do nosso ViewHolder
personalizado, inicialize as views que pertencem aos itens do nosso RecyclerView
.
public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{ public static class PersonViewHolder extends RecyclerView.ViewHolder { CardView cv; TextView personName; TextView personAge; ImageView personPhoto; PersonViewHolder(View itemView) { super(itemView); cv = (CardView)itemView.findViewById(R.id.cv); personName = (TextView)itemView.findViewById(R.id.person_name); personAge = (TextView)itemView.findViewById(R.id.person_age); personPhoto = (ImageView)itemView.findViewById(R.id.person_photo); } } }
Em seguida, adicione um construtor ao adapter personalizado para que ele tenha um identificador para os dados que o RecyclerView
exibe. Como nossos dados estão na forma de um objeto List
de Person
, use o seguinte código:
List<Person> persons; RVAdapter(List<Person> persons){ this.persons = persons; }
RecyclerView.Adapter
tem três métodos abstratos que devemos substituir. Vamos começar com o método getItemCount
. Isso deve retornar o número de itens presentes nos dados. Como nossos dados estão na forma de uma List
, só precisamos chamar o método size
no objeto List
:
@Override public int getItemCount() { return persons.size(); }
Em seguida, substitua o método onCreateViewHolder
. Como o próprio nome sugere, esse método é chamado quando o ViewHolder
personalizado precisa ser inicializado. Nós especificamos o layout que cada item do RecyclerView
deve usar. Isso é feito inflando o layout usando LayoutInflater
, passando a saída para o construtor do ViewHolder
personalizado.
@Override public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false); PersonViewHolder pvh = new PersonViewHolder(v); return pvh; }
Sobrescreva o onBindViewHolder
para especificar o conteúdo de cada item do RecyclerView
. Esse método é muito semelhante ao método getView
de um adapter de ListView
. Em nosso exemplo, aqui é onde você deve definir os valores dos campos nome, idade e foto do CardView
.
@Override public void onBindViewHolder(PersonViewHolder personViewHolder, int i) { personViewHolder.personName.setText(persons.get(i).name); personViewHolder.personAge.setText(persons.get(i).age); personViewHolder.personPhoto.setImageResource(persons.get(i).photoId); }
Finalmente, você precisa substituir o método onAttachedToRecyclerView
. Por enquanto, podemos simplesmente usar a implementação da superclasse deste método como mostrado abaixo.
@Override public void onAttachedToRecyclerView(RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); }
Etapa 5: Usando o Adapter
Agora que o adapter está pronto, inclua o seguinte código em sua Activity
para inicializar e usar o adapter chamando o construtor do adapter e o método setAdapter
do RecyclerView
:
RVAdapter adapter = new RVAdapter(persons); rv.setAdapter(adapter);
Etapa 6: Compilando e Executando
Quando você executa o exemplo RecyclerView
em um dispositivo Android, você deve ver algo semelhante ao seguinte resultado.

Conclusão
Neste tutorial, você aprendeu como usar os widgets CardView
e RecyclerView
que foram introduzidos no Android Lollipop. Você também viu exemplos de como usar esses widgets em aplicativos com Material Design. Observe que, embora um RecyclerView
possa fazer quase tudo que um ListView
pode, para conjuntos de dados pequenos, ainda é preferível usar um ListView
, pois ele requer menos linhas de código.
Você pode consultar a Referência de Desenvolvedores do Android para obter mais informações sobre as classes CardView
e RecyclerView
.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post