CardView e RecyclerView

Com a chegada do novo Android L, a Google trouxe para os programadores novas ferramentas para o desenvolvimento de aplicativos.Duas delas estão sendo extremamente usadas e são compatíveis com versões antigas do sistema operacional.Estou falando do CardView

E do RecyclerView

Ambos vieram para melhorar bastante a aparência dos aplicativos e torná-los mais rápidos e otimizados.

Mãos a obra então.

Começando a usar o CardView

Começaremos importando as bibliotecas necessárias para usar os dois widgets.

Realizaremos a codificação no Android Studio, nova ferramenta da Google para a programação de aplicativos Android.

Crie um novo projeto no Android Studio, nomeie-o como desejar e crie uma activity em branco (Blank Activity).
Depois que o projeto for criado, vá até o arquivo build.gradle (app) e adicione as seguintes dependências:

compile ‘com.android.support:cardview-v7:21.0.+’
compile ‘com.android.support:recyclerview-v7:21.0.+’

Sincronize o Gradle e pronto, você já tem as bibliotecas para usar o CardView e o RecyclerView no seu projeto.

Vamos criar um CardView com um título, uma imagem e um resumo de informações, como esse da imagem abaixo:

O código é extremamente simples, basta inserir o CardView, da seguinte maneira:

[sourcecode language=”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:background="@android:color/white"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
card_view:cardCornerRadius="4dp">
</android.support.v7.widget.CardView>
[/sourcecode]

Lembrando que o CardView tem que estar dentro de algum elemento de layout como um RelativeLayout ou um LinearLayout e que esse layout tem que conter a seguinte linha:

[sourcecode language=”xml”]
xmlns:card_view="http://schemas.android.com/apk/res-auto"
[/sourcecode]

Pronto, agora dentro do CardView, podemos colocar o que quisermos. No nosso caso colocaremos, como falei mais acima, dois TextView’s e um ImageView. Ficando o código completo da seguinte maneira.

[sourcecode language=”xml”]
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="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:padding="5dp" >

<!– A CardView that contains a TextView –>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
card_view:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="4dp">

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

<TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:gravity="start"
android:maxLines="1"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingStart="20dp"
android:paddingTop="5dp"
android:text=""
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold"/>

<ImageView
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_below="@id/info_text"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"
android:src=""/>

<TextView
android:id="@+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/banner"
android:layout_centerVertical="true"
android:layout_margin="4dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="3"
android:padding="10dp"
android:text=""
android:textColor="@color/button_material_dark"
android:textSize="13sp"
android:typeface="sans"/>

</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
[/sourcecode]

Fácil, não é. Se estiverem usando o Eclipse, talvez tenham um pouco mais de trabalho para importar as bibliotecas. No final desse post eu explicarei como importar por lá.

Obs: O que estiver dentro do CardView tem que ser “envolvido” por algum tipo de layout (Relative, Linear ou outro), pois o CardView aceita apenas um elemento filho.

Usando o RecyclerView

Vamos agora criar um RecyclerView com uma lista com apenas um TextView.

A primeira coisa que precisamos é criar um layout para cada item do RecyclerView.

Vamos utilizar o código XML abaixo:

[sourcecode language=”java”]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@android:color/white"
android:layout_height="wrap_content">

<TextView
android:id="@+id/garrison_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:typeface="sans"
android:gravity="center"
android:textStyle="bold"
android:textSize="20sp"
android:padding="20dp" />

<TextView
android:id="@+id/garrison"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:typeface="normal"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:textSize="17sp"
android:layout_toEndOf="@+id/garrison_id"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/garrison_id"
android:layout_alignBottom="@+id/garrison_id"/>
</RelativeLayout>
[/sourcecode]

Agora vamos criar o layout do RecyclerView.

[sourcecode language=”java”]
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:scrollbars="vertical"/>
[/sourcecode]

E pronto, o trabalho no XML acabou, vamos agora conectar isso tudo com o código Java. Nossa aplicação vai criar um cardápio de um restaurante universitário.

Declare as variáveis necessárias.

[sourcecode language=”java”]
//Declare o RecyclerView e a lista de itens
private RecyclerView recyclerView;
private List<RestaurantItem> items;
[/sourcecode]

Dentro do método onCreate, para Activities, ou onCreateView, para Fragments, coloque as chamadas abaixo.

[sourcecode language=”java”]
createAndPopulateMenu();

RestaurantAdapter adapter = new RestaurantAdapter(context, items);

recyclerView.setAdapter(adapter);
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.setLayoutManager(new LinearLayoutManager(context));
recyclerView.setClickable(false);
changeRestaurant.attachToRecyclerView(recyclerView);

setHasOptionsMenu(true);
[/sourcecode]

[sourcecode language=”java”]
private void createAndPopulateMenu()
{
items = new ArrayList<>();

items.add(new RestaurantItem("Carne de Porco"));
items.add(new RestaurantItem("Arroz"));
items.add(new RestaurantItem("Feijão"));
items.add(new RestaurantItem("Salada Marroquina"));
items.add(new RestaurantItem("Caldo de Mandioca"));
items.add(new RestaurantItem("Melância"));
items.add(new RestaurantItem("Vegetariano: Viados"));
}

private void setLayout()
{
recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
}
[/sourcecode]

Agora, só precisamos criar o nosso adapter personalizado.

Crie uma classe chamada RestaurantItem e insira o código abaixo:

[sourcecode language=”java”]
public class RestaurantItem
{
private String garrison;

public RestaurantItem(String garrison)
{
setGarrison(garrison);
}

public void setGarrison(String garrison)
{
this.garrison = garrison;
}

public String getGarrison()
{
return garrison;
}
}
[/sourcecode]

Agora criaremos uma classe chamada RestaurantViewHolder que irá extender a classe RecyclerView.ViewHolder.

[sourcecode language=”java”]
public class RestaurantViewHolder extends RecyclerView.ViewHolder
{
@SuppressWarnings("unused")
private Context context;
public TextView garrisonId;
public TextView garrison;

public RestaurantViewHolder(Context context, View itemView)
{
super(itemView);
this.context = context;
garrison = (TextView) itemView.findViewById(R.id.garrison);
}
}
[/sourcecode]

E por último uma classe chamada RestaurantAdapter que extenderá a classe RecyclerView.Adapter.

[sourcecode language=”java”]
public class RestaurantAdapter extends RecyclerView.Adapter<RestaurantViewHolder>
{
private Context context;
private List<RestaurantItem> items;

public RestaurantAdapter(Context context, List<RestaurantItem> items)
{
this.context = context;
this.items = items;
}

@Override
public RestaurantViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View view = LayoutInflater.from(context).inflate(R.layout.restaurant_list_item, parent, false);
return new RestaurantViewHolder(context, view);
}

@Override
public void onBindViewHolder(RestaurantViewHolder viewHolder, int position)
{
RestaurantItem menuItem = items.get(position);
viewHolder.garrison.setText(menuItem.getGarrison());
}

@Override
public int getItemCount()
{
return items.size();
}
}
[/sourcecode]

Agora temos nosso RecyclerView pronto.

Problemas no Eclipse

Quem ainda usa o Eclipse para programar terá mais dificuldade para usar os novos recursos do Android.
Agora que o Android Studio já está com uma versão bem estabilizada, é recomendado que passem a usar ele, que trás todos os recursos para um melhor desenvolvimento da plataforma.

Contudo, se você prefere sofrer, faça o seguinte.

Procure a pasta do android-sdk e veja se existe o seguinte caminho ..\android-sdk\extras\android\support\v7. Agora de volta ao Eclipse, vá em Android > Import Existing Android Code, caminhe até essa pasta e importe o recyclerview e o cardview. Após a importação, use o clean em ambos. Vá nas propriedades dos dois projetos, marque-os como bibliotecas e salve a alteração. Pronto, você já pode usar os novos recursos no Eclipse.

Lembrando que o Eclipse não processa a visualização de nenhum dos dois componentes, sendo mais trabalhoso a criação.

Quaisquer dúvidas, deixe um comentário.