Bordes redondos ListView Android

En un artículo anterior aprendimos a establecer los bordes redondos de los elementos de un TableView para IOS y hoy aprenderemos a realizarlo en Android, se recomiendo tener conocimiento previo del uso de ListView.

Screen Shot 2015-12-26 at 18.56.14.png

Para poder establecer un borde redondo solo basta con establecerle el fondo del item con un drawable que nosotros definamos y para ello vamos a crear dentro de la carpeta drawable (si no existe la crean) un archivo de tipo “drawable resource file”

Screen Shot 2015-12-26 at 19.00.16

Ingresamos el nombre de nuestro archivo y damos click en “Ok”Screen Shot 2015-12-26 at 19.00.38.png

 

Cuando se crea se nos despliega un archivo con el siguiente contenido


<?xml version="1.0" encoding="utf-8"?>
<selector>

</selector>

Vamos a reemplazarlo por el siguiente código en el cual realizamos lo siguiente:

  1. Crear una figura (shape)
  2. Establecer el color de fondo mediante solid, cabe mencionar que también podemos asignar un gradiente  y para ello se utiliza la propiedad gradient
  3. Establecer los bordes redondos de 100p (pueden ajustarlo a su gusto)
  4. Establecer el padding, de igual manera lo pueden modificar

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/option_item" />

    <corners android:radius="100dp"/>

    <padding

        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />


</shape>


Ahora vamos a dirigirnos al layout de cada elemento de nuestro ListView y vamos a establecer el valor del background con el nuevo archivo que acabamos de crear, en mi caso el archivo se llama “round_corners.xml” de manera que debe quedar así


 android:background=@drawable/round_corners"

Si ejecutan el proyecto podrán observar que ahora los items del ListView tienen una nueva apariencia, en Github podrán encontrar un ejemplo 🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s