Inicio » Blog » Android

24 octubre, 2018

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

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

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 14796 veces

Compartir link del tutorial con tus amigos


Android Básico App Restaurante Android Básico App Restaurante

Curso Android Básico para desarrollar una app para un restaurante.

Descarga del código fuente

USD 10.00

Android PHP MySql App Restaurant Android PHP MySql App Restaurant

Curso Android, PHP y MySql App Restaurant con Pedidos Delivery

Descarga del código fuente

USD 12.00

Android PHP MySql Lector QR Android PHP MySql Lector QR

Curso Lector QR en Android con servicios web en PHP y MySql

Descarga del código fuente

USD 10.00

App Minimarket con Scanner QR App Minimarket con Scanner QR

Curso App Minimarket con Lector QR en Android, Flutter y Laravel

Descarga del código fuente

USD 200.00

Aprende más sobre Android

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023