Pregunta ¿Cómo crear un botón de acción flotante (FAB) en Android, usando AppCompat v21?


Me gustaría crear un botón de acción flotante (para agregar elementos a una vista de lista), como el calendario de google, manteniendo la compatibilidad con las versiones de Android anteriores a la piruleta (antes de 5.0).

Creé este diseño:

Actividad main_activity.xml:

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

Draw fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

Style styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

El resultado es similar, pero no existe el sombreado, una característica del diseño de materiales:

Botón de acción flotante del calendario:

Calendar's floating action button

El botón de acción flotante de mi aplicación:

My app's floating action button

¿Cómo puedo agregar el sombreado a mi botón?

Ya he usado la elevación del atributo, pero no funciona


74
2017-11-16 23:14


origen


Respuestas:


Ya no es necesario crear su propio FAB ni utilizar una biblioteca de terceros, se incluyó en AppCompat 22.

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Simplemente agregue la nueva biblioteca de soporte llamada diseño en su archivo gradle:

compile 'com.android.support:design:22.2.0'

... y estás listo para ir:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

96
2018-06-16 08:28



En general, he usado xml drawables para crear shadow / elevation en un widget pre-lollipop. Aquí, por ejemplo, se encuentra un xml drawable que se puede usar en dispositivos pre-lollipop para simular la elevación del botón de acción flotante.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

En lugar de ?attr/colorPrimary puedes elegir cualquier color Aquí hay una captura de pantalla del resultado:

enter image description here


43
2017-12-16 03:11



Hay muchas librerías agregando un FAB (botón de acción flotante) en su aplicación. Aquí hay algunas de ellas que sé.

FAB de makovkastar

FAB compuesto de futuersimple

Biblioteca de materiales de diseño que también incluye FAB

Todas estas bibliotecas son compatibles con dispositivos pre-lollipop, mínimo para api 8


20
2017-12-05 14:19



Aquí hay un adicional gratis Biblioteca de botón de acción flotante para Android Tiene muchas personalizaciones y requiere SDK versión 9 y superior

enter image description here

Video de demostración completo


8
2018-02-06 11:45



El código xml de Justin Pollard funciona realmente bien. Como nota al margen, puede agregar un efecto dominó con las siguientes líneas xml.

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

4
2018-04-12 04:40



Tratar esta biblioteca, es compatible con la sombra, hay minSdkVersion=7 y también es compatible android:elevation atributo para API-21 implícitamente.

La publicación original es aquí.


2
2017-11-26 21:59



Añadir relleno y elevación:

 android:elevation="10dp"
 android:padding="10dp"

0
2017-11-16 23:22