Diseño de un Botón con XML en Android Studio
¿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.
Vamos a diseñar un botón con estilos en xml modificando las siguientes propiedades:
Lo que debemos hacer, es crear un nuevo archivo en la carpeta drawable, con el nombre btn.xml, sigue los siguientes pasos:
<?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>
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>
Descarga código fuente 24
No hay descargable
Redactado por: , Leido 12369 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022