Android – Conhecendo e utilizando o CardView

Caro leitor,

Primeiramente desejo a você um ótimo início de ano, com muita saúde, paz e sucesso profissional. Inicio este ano redigindo um artigo sobre a plataforma Android, sendo que neste abordarei o uso do widget “CardView”. Após analisar a documentação oficial, o cardview herda da classe “FrameLayout”, permitindo a exibição de informações dentro dos cartões, tendo uma aparência coerente nas diversas plataformas, podendo ser configurado sombras e bordas arredondadas. Na Figura 01 podemos conferir a estrutura da classe “android.support.v7.widget.CardView”.

Figura 01: Estrutura Hierárquica.

O “CardView” utiliza a propriedade de elevação (cardElevation) na versão “Lollipop” (Android 5.0, API nível 21) e posteriores. Para as versões mais antigas a implementação do efeito de sombra seria de forma emulada ou programática.

Principais Atributos

Nas próximas linhas irei descrever os atributos mais utilizados, confira os detalhes na Tabela 01.

Nome do atributo do XML	Descrição
android.support.v7.cardview:cardBackgroundColor	Cor de fundo do CardView, podendo ser um valor na forma “#rgb”, “#argb”, “ rrggbb”, etc ...
android.support.v7.cardview:cardCornerRadius	Configuração de dimensão de canto. As unidades disponíveis são: px (pixels), dp (pisels independentes, sp (pixels dimensionados com base na fonte), etc ...
android.support.v7.cardview:cardElevation	Elevação para o widget, seguindos as mesmas unidades descritas acima.
android.support.v7.cardview:cardMaxElevation	Elevação máxima, também seguindos as unidades supracitadas.
android.support.v7.cardview:cardPreventCornerOverlap	Preenchimento ao CardView na versão v20, assim evitando interseções entre o conteúdo do cartão e os cantos arredondados. Usaremos os valores booleanos: “true” ou “false”
android.support.v7.cardview:cardUseCompatPadding	Adicione o espaçamento a partir da versão  API21, conseguindo uma compatibilidade para versões anteriores. Usaremos atributos booleanos para esta tarefa.
android.support.v7.cardview:contentPadding	Seria o interior entre as bordas do Cardview. Usaremos valores de pixels descritos anteriormente.
android.support.v7.cardview:contentPaddingBottom/ android.support.v7.cardview:contentPaddingLeft/ android.support.v7.cardview:contentPaddingRight/ android.support.v7.cardview:contentPaddingTop	Espaço interior entre a borda inferior, lateral esquerda, direita e superior respectivamente. Podemos utilizar como medidas os pixels descritos nos itens acima.

Tabela 01.

Principais Construtores

Teremos três principais construtores, sendo o:

CardView (Context context):
Passamos por parâmetros apenas o Contexto da aplicação.

CardView (Context context, AttributeSet attrs):
Informaremos por parâmetros o Contexto e valor da classe “AtributeSet”, que seria uma coleção de atributos, como os encontrados associados a uma tag em um documento XML.

CardView (Context context, AttributeSet attrs, int defStyleAttr):
No momento da criação usaremos os mesmos parâmetros citados anteriormente adicionados do atributo inteiro “defStyleAttr” que nada mais é do que um identificador para o atributo.

Principais Métodos

Teremos inúmeros métodos referentes à classe “CardView”. Abaixo destaquei alguns referentes ao retorno e outros de Atualização. Os famosos (Gets e Sets) da programação orientada a objetos. Ver Tabela 02.

Nome do Método	Descrição
getCardElevation()	Retorna um valor numérico a elevação do CardView.
getContentPaddingBottom()	Retorna um valor numérico do tipo inteiro do preenchimento interno antes da borda inferior do CardView. Temos os métodos getContentPaddingLeft(),  getContentPaddingRight() e getContentPaddingTop() que possuem praticamente a mesma característica relacionada à região esquerda, direita e superior.
setCardElevation(float elevation)	Setar, atualizar a elevação do CardView.
setContentPadding(int left, int top, int right, int bottom)	Define o preenchimento entre as bordas do CardView.
setRadius(float radius)	Seta o raio de canto do widget.

Tabela 02.

Importando a Biblioteca

O primeiro passo para realizar a importação seria a criação de um novo projeto no Android Studio. Para isto clique em “File/New/New Project ...” Fiquem a vontade para inserir o nome como desejar, no meu caso foi criado com o nome “Cardview”. Para nossos testes também foi escolhido o SDK (API 23: Android 6.0 - Marshmallow).

Após a criação do projeto, localize o arquivo “build.gradle (Module: app)”, o qual foi gerado automaticamente. Entre as chaves { } do item “dependencies” insira o código abaixo e logo após clique no link “Sync Now” para reindexar o projeto com a bilioteca “CardView”. Confira os detalhes no código e na Imagem 02 abaixo.

Exemplo:

dependencies {

. . .



compile 'com.android.support:cardview-v7:24.1.1'

. .  .

}

Figura 02: Adicionando a referência do CardView.

Criando um exemplo prático

Localize o arquivo de layout, por exemplo: “res/layout/activity_main.xml” o qual deverá estar provavelmente em branco, apenas com o componente de Layout. Para adicionar o componente “CardView” basta adicioná-lo com o auxílio da TAG “android.support.v7.widget.CardView” e dentro do mesmo iremos implementar uma “ImageView” junto com dois “TextViews”. Teremos o layout idêntico ao da Figura 03.

Figura 03: Layout Proposto.

Abaixo teremos o XML correspondente com explicações das principais partes do código.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    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="datasmart.cardview.MainActivity">

Para que o “CardView” funcione dentro de algum elemento de layout como um “RelativeLayout” ou um “LinearLayout”, o mesmo tem que conter a seguinte linha de identificação destacada acima.

    <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"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="4dp">

Teremos algumas configurações padrões como “android:id”, altura e largura do layout, entre outras configurações. Faremos algumas configurações pertinentes da classe “CardView” como por exemplo o “app:cardBackgroundColor” para alterar a cor de fundo e “app:cardCornerRadius” para definir o arredondamento de canto do componente.

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txtTitulo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingStart="20dp"
                android:paddingTop="5dp"
                android:text="DataSmart - Avaré/SP"
                android:textColor="@android:color/black"
                android:textSize="20dp"
                android:textStyle="bold"/>

            <ImageView
                android:id="@+id/imgBanner"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_below="@id/txtTitulo"
                android:scaleType="centerCrop"
                android:src="@drawable/imagem"/>

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/imgBanner"
                android:layout_centerVertical="true"
                android:layout_margin="4dp"
                android:gravity="center"
                android:maxLines="3"
                android:padding="10dp"
                android:text="Empresa que desenvolve softwares na área comercial para diversas plataformas."
                android:textColor="@color/button_material_dark"
                android:textSize="13dp" />

        </LinearLayout>

Já para o componente “ImageView” apenas definimos a Imagem, o layout e o tipo de escala. Para os componentes TextView não fazemos nada de diferente, apenas informamos um texto simples para uma fácil compreensão. É importante informar que ambos os componentes estão localizados dentro de um “LinearLayout” e o mesmo situado no interior de um “CardView”, o qual irá agrupá-los para uma melhor visualização.

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

Podemos conferir o nosso aplicativo em run-time na Imagem 04.

 

Figura 04: Aplicativo em funcionamento.

 

Conclusões

Neste artigo foram descritos todos os principais atributos, métodos e construtores do componente “CardView”. Foi desenvolvido também um pequeno exemplo de como devemos utilizá-lo corretamente. Este tipo de widget é facilmente encontrado em praticamente todos os novos aplicativos, assumindo assim um papel importante de organização e distribuição de dados dentro de um layout.

Fica a dica aí pessoal, um grande abraço e até o mês que vem!

Referências

https://developer.android.com/training/material/lists-cards.html?hl=pt-br