studio - ¿Cómo crear un botón de acción flotante(FAB) en Android, usando AppCompat v21?
floating action button implementation (7)
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:
El botón de acción flotante de mi aplicación:
¿Cómo puedo agregar el sombreado a mi botón?
Ya he usado la elevación del atributo, pero no funciona
Añadir relleno y elevación:
android:elevation="10dp"
android:padding="10dp"
Aquí hay una biblioteca adicional gratuita de botón de acción flotante para Android. Tiene muchas personalizaciones y requiere SDK versión 9 y superior.
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>
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 puede elegir cualquier color. Aquí hay una captura de pantalla del resultado:
Hay muchas librerías agregando un FAB (botón de acción flotante) en su aplicación. Aquí hay algunas de ellas que sé.
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
Pruebe esta biblioteca , admite shadow, hay minSdkVersion=7 y también admite android:elevation atributo de android:elevation para API-21 implícitamente.
La publicación original está here .
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" />