Cómo crear una interfaz 'Card UI' en Android usando XML

2 minutos de lectura, 234 palabras
Publicado el 11 de Mayo del 2014
El contenido quizás esté desactualizado 😕 Vaya con cuidado!

Una de las cosas que son más comunes a la hora de diseñar interfaces en Android son las interfaces Holo. Actualmente, el elemento que es más común — en conjunto con los menús laterales y las ActionBar — son los elementos tipo tarjeta, bastante comunes en el Play Store.

Implementación en XML

Hay varias alternativas de implementación. La que más se repite es hacer un nine patch, que requiere cierto esfuerzo, pero lamentablemente, el resultado no es pixel perfect, así que la mejor solución siempre es usar XML.

Crea un nuevo archivo XML en tu carpeta de drawables y en ese archivo pega lo siguiente:

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

Con eso, tendrás un elemento tipo “Card” en la parte que necesites. Bastará nada más que definas como fondo al XML recién creado sobre cualquier view de Android.

Demo

Este es un ejemplo en donde, además, se puso el fondo de color plomo, de manera de notar de mejor forma el resultado. El alto del LinearLayout es de 100dp, ya que si omitimos el alto o lo definimos como wrap_content, entonces no podremos ver prácticamente nada.

Card UI Pixel Perfect

Además, entre usar un 9patch vs un archivo XML, el resultado es, técnicamente, más pixel perfect.

Ojalá te sirva como a mi. ¡Suerte!

Comparte esto: