Linearlayout Android com estilo de cards

Com o material designer do Android surgiram algumas opções bastante interessantes para o desenvolvimento de interfaces visuais no Android

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Android - TUTORIAL

Última atualização em: | 3368 Visualizações

Linearlayout Android com estilo de cards

Uma destas opções são os cards. Para utilizar cards em seu projeto, você precisa adicionar bibliotecas de compatibilidade além de uma biblioteca específica para cards. Neste tutorial apresentaremos uma alternativa simples para simular um card usando o LinearLayout e estilos personalizados.

A primeira coisa a ser feita, é criar um arquivo na pasta drawable do seu projeto com o nome linearlayout_card_shadow.xml e adicionar o conteúdo conforme segue abaixo:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
       <shape android:shape="rectangle">
           <solid android:color="#CABBBBBB"/>
           <corners android:radius="2dp" />
       </shape>
   </item>
 
   <item
       android:left="0dp"
       android:right="0dp"
       android:top="0dp"
       android:bottom="2dp">
       <shape android:shape="rectangle">
           <solid android:color="@android:color/white"/>
           <corners android:radius="2dp" />
       </shape>
   </item>
</layer-list>

Após criado este arquivo, fica muito simples utilizar como background no LinearLayout que fará o papel de card, fazendo e adicionando o conteúdo dentro do elemento, conforme segue o exemplo abaixo:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:paddingRight="16dp"
  android:paddingTop="5dp"
  android:paddingLeft="16dp"
  android:paddingBottom="16dp">
 
    <TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Gostou do Aplicativo?"
  android:textColor="#999"
  android:paddingBottom="10dp"
  android:textStyle="bold"
  android:textSize="16sp"
  android:gravity="center" />
 
<TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Ajude a melhorar para fazer mais para você!"
  android:textColor="#999"
  android:gravity="center"
  android:layout_marginBottom="5dp"/>
 
</LinearLayout>

Como exemplo de utilização deste código, podemos falar sobre a modal de sobre encontrada nos Aplicativos da Garbo Software, onde foi criada uma divisão para facilitar a visualização das opções, deixando a visualização mais agradável e organizada.

A imagem abaixo foi extraída do aplicativo Calcular Horas Extras disponível gratuitamente na Google Play.

Calcular Horas Extras

Note que este estilo foi utilizado nesta aplicação levando em conta que é gerada por um framework que precisa ser compatível com versões anteriores ao desenvolvimento. Indicamos que em projetos mais atuais utilize a própria api disponibilizada pelo Google.

Esta é uma maneira simples de simular cards no Android e funciona em qualquer versão para deixar suas interfaces mais interessantes aos olhos dos usuários com o mínimo de esforço de programação.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!