Diseño de un botón con XML en Android

En esta ocasión solo vamos a diseñar un botón con XML en Android Studio; quiere decir que no vamos a programar la interactividad del botón. solo veremos la parte visual como se vee dicho botón.

Diseño que aplicaremos al widget Button

Vamos a diseñar un botón con estilos en xml modificando las siguientes propiedades:

1. Bordes redondeados
2. Background degradado
3. Transparente
4. Color del texto

Pasos para diseñar el botón 

Lo que debemos hacer, es crear un nuevo archivo en la carpeta drawable, con el nombre btn.xml, sigue los siguientes pasos:

1. Darle anticlick a la carpeta drawable  el directorio de acceso es app/res/drawable
2. Seleccionas new
3. Seleccionas Drawable resource file
4. Colocas el nombre btn y aceptar
5. Luego modificamos con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="4dp" android:color="#33ffffff" />
    <corners android:radius="50dp" />
    <gradient android:angle="-90" android:startColor="#33ffffff" android:endColor="#11ffffff" />
</shape>

• Ancho de la linea del borde 4dp, color transparente
• Radio de 50dp
• Gradiente con ángulo de -90, colores blanco de #33FFFFFF A #11FFFFFF 

¿Cómo usamos el diseño XML para cualquier botón?

En el layout de tu actividad o activity insertas el componente de tipo Button luego, modificas para que el código quede  de la siguiente manera:

<Button
            android:id="@+id/btn"
            android:text="MÁS INFORMACIÓN"
            android:textColor="#FFFFFF"
            android:padding="15dp"
            android:background="@drawable/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

Básicamente agregamos un background al botón donde cargamos el recurso creado desde la carpeta drawable,

Para que el botón esté centrado debe estar contenido dentro de una Layout de tipo lineal  LinearLayout con la propiedad gravity en center, esto hará que siempre esté centrado no importando la cantidad de elementos que desees agregarle.

android:gravity="center"

El código final podría ser algo así:

CÓDIGO XML : app/res/layout/main_activity.xml

 <LinearLayout
        android:gravity="center"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="DISEÑANDO UN BOTÓN"
            android:textColor="#FFFFFF"
            android:textSize="30dp"
            android:layout_marginBottom="50dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn"
            android:text="MÁS INFORMACIÓN"
            android:textColor="#FFFFFF"
            android:padding="15dp"
            android:background="@drawable/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

Leido 15062 veces