Implementando o Cardview no android studio

Implementando o Cardview no android studio

abril 8, 2019 0 Por Gabriel

O Cardview foi introduzido no android Lollipop como mais um bom componente para a customização da UI, geralmente utilizado junto com o Recyclerview o Cardview é uma boa opção para customização de listas em seu projeto.

CardView

Criando um Cardview

Um CardView pode ser adicionado à sua Activity ou Fragment através do XML. Para criar um CardView vazio, você teria que adicionar o seguinte código ao XML do layout, conforme mostrado 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 (android:id=”@+id/person_name)
  • um TextView para exibir a idade da pessoa (android:id=”@+id/person_age)
  • um ImageView para exibir a foto da pessoa (android:id=”@+id/person_photo)

É assim que o XML seria:

<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>

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:

Customização do CardView

Os atributos da visualização do cartão são:

  • cardBackgroundColor: define a cor de fundo do cartão. O atributo padrão “background” não tem nenhum efeito no cartão.
  • cardElevation: Define a elevação. O atributo padrão “elevação” não afeta o cartão.
  • cardMaxElevation: define a elevação máxima.
  • cardCornerRadius: Define o raio do canto do cartão.
  • cardPreventCornerOverlap: Ativa / desativa o preenchimento de conteúdo para evitar que as vistas de crianças sejam cortadas.
  • cardUseCompatPadding: Adiciona espaço ao redor da visualização do cartão para evitar que a sombra do cartão seja cortada pela vista pai da placa.

Customizar cardview através da activity

Você também pode customizar seu CardView através da sua activity, basta instanciar o XML em que o componente se encontra e atribuir alguma função como o exemplo abaixo:

CardView cardView = (CardView) findViewById (R.id.cv); 
cardView.setCardBackgroundColor (...);
cardView.setCardElevation (...);
cardView.setMaxCardElevation (...);
cardView.setRadius (...);
cardView.setPreventCornerOverlap (...);
cardView.setUseCompatPadding (...);

Conclusão:

Neste tutorial, você aprendeu como usar o widget CardView que foi introduzido no Android Lollipop. Você pode consultar a Referência de Desenvolvedores do Android para obter mais informações sobre as classes CardView

Instagram: @DevLemos

Grupo no Whatsapp: https://chat.whatsapp.com/KpgX68HShoc9PSuB2OyY0u

Abraços!

Fontes:

https://developer.android.com/guide/topics/ui/layout/cardview

https://material.io/develop/android/components/material-card-view/

https://code.tutsplus.com/pt/tutorials/getting-started-with-recyclerview-and-cardview-on-android–cms-23465