Cómo Crear un Botón con Gradiente en XML para Android

¿Quieres darle un toque único y moderno a tus botones en Android? ¡Estás en el lugar adecuado! En este tutorial aprenderás a crear botones con gradientes espectaculares utilizando XML en Android Studio, todo con el poder de Kotlin. Los gradientes añaden un estilo vibrante y profesional a tu aplicación, ¡y lo mejor es que es fácil de implementar!

Version 2025

Los gradientes no solo mejoran la apariencia visual, sino que también mejoran la experiencia de usuario al hacer que los botones se vean más interactivos y atractivos. Este tipo de botones se adaptan a diferentes estilos y temas, lo que te permite crear interfaces únicas y dinámicas.

Pasos para crear un botón con gradiente en XML en Android Studio:

1. Configura tu proyecto en Android Studio: Si aún no tienes un proyecto, crea uno nuevo. Asegúrate de que esté configurado para usar Kotlin y tenga la estructura básica de un proyecto Android.

2. Crea un archivo Drawable para el gradiente:

   Este código crea un gradiente que va de rojo a azul.

   • En la carpeta res/drawable, crea un archivo XML, por ejemplo, btn_gradient.xml.
   • Dentro de este archivo, agrega el siguiente código para crear un gradiente lineal:

     <?xml version="1.0" encoding="utf-8"?>
     <androidx.appcompat.widget.LinearLayoutCompat 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:id="@+id/main"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center"
         tools:context=".MainActivity">
     
         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
     
             android:text="BUTTON XML" />
     
     </androidx.appcompat.widget.LinearLayoutCompat>
     

      

3. Crea el gradiente Drawable: Ahora, abre el archivo de tu layout donde deseas agregar el botón y usa el drawable que acabas de crear como fondo del botón:

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <gradient
           android:angle="90"
           android:startColor="@color/accent"
           android:endColor="@color/primary"
           android:type="linear"/>
       <corners android:radius="25dp"/>
       <stroke
           android:width="2dp"
           android:color="@color/primary"/>
   </shape>
   

4. Crear el style en el tema: En tu archivo de res/values/themes/themes.xml:

   <resources xmlns:tools="http://schemas.android.com/tools">
       <!-- Base application theme. -->
       <style name="Base.Theme.Py" parent="Theme.Material3.DayNight.NoActionBar">
           <!-- Customize your light theme here. -->
           <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
       </style>
   
       <style name="Theme.Py" parent="Base.Theme.Py" />
   
       <style name="ButtonGradient" parent="Widget.Material3.Button">
           <item name="android:background">@drawable/btn_gradient</item>
           <item name="backgroundTint">@null</item>
           <item name="backgroundTintMode">@null</item>
       </style>
   
   </resources>

5. Asignamos el estilo gradiente al botón: ¡Listo! Ahora tienes un botón con gradiente que no solo se ve genial, sino que también es funcional. Puedes experimentar con diferentes colores y ángulos para personalizar aún más tu diseño.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/ButtonGradient"
        android:text="BUTTON XML" />

Leido 124 veces | 0 usuarios