Cómo crear Botones personalizados en Android con diferentes formas y colores

Un botón es una interfaz de usuario que se utiliza para realizar alguna acción cuando se hace clic o se toca.

Forma predeterminada del botón

En este artículo, intentaremos cambiar la forma y el color del Botón a varios diseños, como:

• Botón ovalado
• botón rectangular
• Botón cilíndrico

Acercarse:

A continuación se muestran los diversos pasos para crear botones personalizados:
Paso 1: Iniciar un nuevo proyecto de Android Studio
Consulte este artículo para ver en detalle cómo crear un nuevo proyecto de Android Studio.

Paso 2: agregue el botón
Dado que solo necesitamos personalizar los botones, solo agregaremos botones en nuestro diseño. No necesitamos ningún otro widget. Esto se puede hacer escribiendo el código en XML o usando la pestaña Diseño. Aquí, lo haremos agregando su código XML.

Ahora, dado que necesitamos personalizar el Botón según 3 formas (como se muestra arriba), agregaremos 3 botones y agregaremos la personalización de cada uno por separado, digamos que los botones sean: ovalados , rectangulares y cilíndricos .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#ffff00">
  
    <!-- 1st Button: Oval -->
    <Button
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="20dp"
        android:text="oval"
        android:textColor="#388e3c"/>
  
    <!-- 2nd Button: Rectangle -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="rectangle"
       android:textColor="#FFFF"/>
  
    <!-- 3rd Button: Cylindrical -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="cylindrical"
       android:textColor="#3e2723"/>
  
</LinearLayout>

Inicialmente, los tres botones tienen valores predeterminados y tendrán el aspecto predeterminado que se muestra arriba.

Paso 3: Personalización del botón
Para personalizar el botón, como se muestra arriba, necesitaremos algunos atributos de Button en particular:

1. forma : Esto define la forma del widget que se está utilizando. Por ejemplo: óvalo, rectángulo, etc.
2. color Este atributo toma el código de color hexadecimal como parámetro y establece el color según el código
3. corner::radius : este atributo define cuánto deben ser las esquinas curvas del botón. Por ejemplo, ninguna curva conducirá a un rectángulo y aumentar la curva también puede dar como resultado un círculo.
4. trazo: este atributo hace referencia al grosor del contorno del botón. Cuanto mayor sea el trazo, más grueso será el contorno.

Estos atributos se pueden configurar para un widget con la ayuda de un archivo de recursos Drawable.

1. Creando un nuevo archivo de recurso dibujable :

   Crearemos un nuevo archivo dibujable que contendrá las personalizaciones como la forma, el color y el degradado que queremos establecer en nuestro botón. Para crear un archivo dibujable, haga clic en: aplicación -> res -> dibujable (clic con el botón derecho) -> Nuevo -> Archivo de recursos dibujable y asígnele el nombre que desee.
   

2. Agregar código al archivo de recursos:

   Ahora que tenemos este archivo de recursos dibujable, podemos personalizar nuestro botón agregando etiquetas como forma, color, trazo o cualquier otro atributo que queramos.

   botón_personalizado.xml

   <?xml version="1.0" encoding="utf-8"?> <shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval" >        <stroke         android:color="#388e3c"         android:width="2dp"/>     <corners         android:radius="5dp"/>     <solid         android:color="#ffff"/> </shape>

   botón_personalizado2.xml

   <?xml version="1.0" encoding="utf-8"?> <shape      xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <stroke         android:color="@color/colorPrimary"         android:width="1dp"/>     <corners         android:radius="15dp"/>     <gradient         android:startColor="#2e7d32"         android:endColor="#e0f7fa"/> </shape>

   botón_personalizado3.xml

   <?xml version="1.0" encoding="utf-8"?> <shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">        <stroke         android:color="@color/colorPrimary"          android:width="1dp"/>     <corners          android:radius="190dp"/>     <solid          android:color="#76ff03"/>     <gradient          android:startColor="#76ff03"/> </shape>

3. Agregar estas personalizaciones a nuestro botón original:
   ahora podemos agregar estas personalizaciones al botón predeterminado que creamos anteriormente. Para hacer esto, simplemente cambiamos el atributo de fondo de nuestro Botón al archivo de recurso dibujable que acabamos de crear.
   

   android:fondo=”@drawable/botón_personalizado”

Así es como se verá ahora nuestro archivo activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#ffff00">
  
    <!-- 1st Button: Oval -->
    <Button
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="20dp"
        android:text="oval"
        android:textColor="#388e3c"
        android:background="@drawable/custom_button"/>
  
    <!-- 2nd Button: Rectangle -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="rectangle"
       android:textColor="#FFFF"
       android:background="@drawable/custom_button2"/>
  
    <!-- 3rd Button: Cylindrical -->
    <Button
       android:layout_width="180dp"
       android:layout_height="60dp"
       android:layout_marginLeft="180dp"
       android:layout_marginTop="20dp"
       android:text="cylindrical"
       android:textColor="#3e2723"
       android:background="@drawable/custom_button3"/>
  
</LinearLayout>

Paso 4: Ejecutar el proyecto para ver el resultado

Producción: