Cómo crear un botón con bordes redondos en Android

El diseño por defecto de la interfaz de Android no es del todo malo, pero sí que es verdad que con unos pocos ajustes, podemos conseguir interfaces muy bonitas. Una de las cosas que cada vez se ve más en aplicaciones conocidas, son los botones redondeados. Algo muy sencillo de hacer a través del objeto <Shape> en un archivo xml. En este artículo verás como puedes crear un botón con bordes redondos en Android.

¿Qué es un objeto Shape?

Empecemos por el principio. Generalmente en una aplicación Android, si queremos usar una imágen como fondo de algún elemento, deberemos crear varias imágenes para las diferentes densidades de pantalla que hay en el mercado, (salvo que quieras que tu aplicación sea un truño y que solo se vea bien en una sola densidad de pantalla, algo desaconsejable totalmente, si lo haces hazlo bien). Por ello, en determinados casos tu APK final puede pesar demasiado.

Para solucionar esto, existen los objetos Shape y ShapeDrawable, que permiten dibujar formas básicas a partir de texto, pudiendo generar todas las variantes para las diferentes densidades de pantalla a partir de un mismo archivo, ahorrando así gran cantidad de peso en la aplicación final.

Shape ahorra espacio en tu aplicación

Con Shape se pueden crear gran variedad de formas básicas, añadir sombreados, redondear y crear nuevos bordes etc… Pero existirán determinados escenarios donde no podamos usarlo debido a la simplicidad de los dibujos. Por ello es recomendable que siempre que la situación lo permita, se utilicen imágenes o fondos creados a partir de objetos Shape, evitando así tener que crear todas las variantes de una misma imágen para las diferentes densidades.

Crear un fondo de bordes redondos para un botón Android

Lo primero que vas a hacer es crear un nuevo archivo xml en la carpeta Drawable de tu proyecto con el elemento Shape de raiz. Para ello sigue este recorrido:

• Clic derecho en res / drawable
• New
• Drawable resource file > dale nombre al archivo (‘bordes_redondos’ para el ejemplo)
• Selecciona Shape como ‘root element’ y haz clic en Aceptar

Para este ejemplo, vamos a crear un fondo azul con borde de color blanco y redondeado. Copia y pega el siguiente código en tu nuevo archivo xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="50dip" />
            <stroke android:width="3dip" android:color="#ffffff" />
            <solid android:color="#0074BD" />


            <!--<gradient android:angle="-90" android:startColor="#DD2C00" android:endColor="#FFAB00" />-->

        </shape>
    </item>
</selector>

Como ves, el objeto Shape se encapsula a su vez en un item, luego se define la forma inicial del fondo con android:shape=»rectangle» y seguidamente se define el radio que tendra el borde del botón:

<corners android:radius="50dip" />

Con un valor de 50dip se consigue el borde completamente redondo.

La siguiente línea define el ancho que tendrá el borde, en este caso 3dp, y el color del mismo, en este caso ‘#ffffff‘ = blanco:

<stroke android:width="3dip" android:color="#ffffff" />

La última línea define el color de fondo, en este caso ‘#0074BD‘ corresponde a un tono azul:

<solid android:color="#0074BD" />

Puedes optar por un color fijo que ocupe todo el fondo, o puedes incluso crear un degradado, del mismo modo que la línea que aparece comentada:

<gradient android:angle="-90" android:startColor="#DD2C00" android:endColor="#FFAB00" />

En este caso, se le indica el ángulo del gradiente como primer parámetro. Utilizando valores como ’90’ o ‘-90’ el degradado se hará de derecha a izquierda y viceversa. Puedes utilizar valores de ‘180’ o ‘-180’ para conseguir el efecto de arriba a abajo y viceversa, aunque también puedes cambiar el orden de los colores para conseguir el mismo efecto que el valor negativo de ángulo.

Aplicar el background al botón

Bien, ahora ya tenemos el fondo creado, ahora vamos a crear una interfaz sencilla con 2 botones para ver ver diferencias entre ellos. Para ello abre el archivo activity_main.xml en la carpeta res > layout y copia y pega el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C95B9"
tools:context=".MainActivity">

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Normal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<Button
    android:background="@drawable/bordes_redondos"
    android:textColor="@android:color/white"
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Redondo"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button1" />

</androidx.constraintlayout.widget.ConstraintLayout>

En el segundo botón, se le ha especificado el archivo que se ha creado como ‘background’, y se ha establecido el color del texto como blanco.

Esto debería darte un resultado como el siguiente, en el que el botón de arriba a modo de comparación mantiene el diseño por defecto de la versión de Android que se esté ejecutando, y el de abajo tiene el fondo que has creado:

A partir de aquí puedes empezar a jugar con tu imaginación para crear otros tipos de fondos diferentes, y empezar a crear una interfaz destacada frente a otras aplicaciones que utilizan los componentes con el diseño de Android.