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

DESCARGAR

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>

 


¿Quieres descargar el código fuente Diseño de un botón con XML en Android?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

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

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 1166 veces | Publicado hace 1 año

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

Ver scripts de ANDROID

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020