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
Última atualização em: | 3560 Visualizações
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.
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.