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

¿Cómo diseñar un botón en Android con XML? degradado y borde

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

¿Cómo diseñar un botón en Android con XML? degradado y borde

Para diseñar un botón debemos aplicar degradado, bordes redondeados y transparencia a un componente de tipo button en una app Android, con xml

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>

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Diseño de un botón con XML en Android?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 588 veces | Publicado hace 1 año

Más códigos de programación en ANDROID.

Ver scripts de ANDROID

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en ANDROID

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019