Saltar al contenido

¿Cómo cambiar la forma del botón de acción flotante (FAB) en Android?

Solución:

El FloatingActionButton proporcionado por las bibliotecas de soporte no se puede extender ya que los métodos que deberían reemplazarse están configurados como privados. Material Components (que es el reemplazo oficial de AndroidX para la biblioteca de soporte) tiene Shape Theming en la hoja de ruta para ~ octubre-diciembre, lo que le permitirá hacer eso de manera oficial y fácil (sin tener que extender la vista).

Pero aún no está disponible, así que mientras tanto, bifurqué customFloatingActionButton de robertlevonyan, y con algunas pequeñas modificaciones, te permite usar tu propia forma personalizada. El código fuente está disponible aquí.

Para agregarlo a su proyecto con Gradle, deberá usar jitpack. Puedes agregarlo así:

allprojects {
   repositories {
       ...
       maven { url 'https://jitpack.io' }
   }
}

Luego implemente mi bifurcación:

implementation 'com.github.JediBurrell:customFloatingActionButton:-SNAPSHOT'

A continuación, crearemos la forma, la que creaste debería funcionar bien.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners
        android:topLeftRadius="@dimen/fab_circle_radius"
        android:topRightRadius="@dimen/fab_circle_radius"
        android:bottomRightRadius="@dimen/fab_circle_radius" />
    <solid android:color="@color/colorAccent" />
</shape>

Luego, finalmente agréguelo a su diseño (se enumeran más opciones de FAB en el repositorio de Github):

<com.jediburrell.customfab.FloatingActionButton
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fabType="custom"
    app:fabShape="@drawable/fab_teardrop"
    app:fabIcon="@drawable/ic_add_24dp"
    app:fabColor="@color/red" />

Y así es como se ve:

Con la biblioteca de componentes de materiales puede utilizar la shapeAppearanceOverlay:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/fab_3_rounded"
    .../>

con:

<style name="fab_3_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

ingrese la descripción de la imagen aquí

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *