java - icon - floating action button menu
Android L-Botón de acción flotante(FAB) (4)
¿Google ya lanzó un estilo definido o un componente para este nuevo botón circular de FAB o debo implementar el diseño por mi cuenta?
El botón se describe aquí: Google Design | Botones de acción flotante
EDITAR (05/2015): verifique la respuesta de Lukas / la respuesta de Gabriele que muestra una manera fácil de implementarlo con la biblioteca de soporte de diseño.
Ya que la característica Labels FAB (como en las aplicaciones Evernote o Inbox) se agregó a esta increíble library siéntase libre de usarla:
Dependencia de Gradle:
compile ''com.getbase:floatingactionbutton:1.3.0''
Layout.xml:
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_labelStyle="@style/menu_labels_style"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp">
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_title="Action A"
fab:fab_colorPressed="@color/white_pressed"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_title="Action B"
fab:fab_colorPressed="@color/white_pressed"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
menu_labels_style.xml:
<style name="menu_labels_style">
<item name="android:background">@drawable/fab_label_background</item>
<item name="android:textColor">@color/white</item>
</style>
fab_label_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/black_semi_transparent"/>
<padding
android:left="16dp"
android:top="4dp"
android:right="16dp"
android:bottom="4dp"/>
<corners
android:radius="2dp"/>
</shape>
¡Disfrutar!
ACTUALIZACIÓN : ahora hay un widget oficial para FAB: FloatingActionButton, consulte la respuesta de Gabriele Mariotti para obtener información completa.
Según Adam Powell y Chet Haase, no crearon un widget para el botón FAB porque es un componente muy fácil de reproducir.
Hubo una pregunta en el discurso de Google IO 2014 "Google I / O 2014 - Ciencia de los materiales: desarrollo de aplicaciones de Android con diseño de material", al final del discurso (aproximadamente a las 37:50) hubo exactamente esa pregunta, se puede escuchar aquí: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280
Chet Haase dice que hay un RoundedBitmapDrawable (no verifiqué si ese es el nombre) que ya debería hacer el trabajo de definir el Esquema.
Pero puedes hacerlo con tu propio dibujo, establecer una Elevación y definir un Esquema circular programáticamente.
Esto debería darle el botón redondo con sombra en la versión L. Pero creo que tendrás que construir el Shadow pre-L por tu cuenta.
Debería verificar el código de CardView para ver cómo reproduce la sombra pre-L. Probablemente lo haré, pero no tengo tiempo ahora. Si no aparece nadie con los detalles, lo haré después de haber encontrado el tiempo para ir y revisarlo.
EDITAR:
Gabriele Mariotti (ver su respuesta a continuación, gracias) agregó un código para mostrarle cómo hacerlo.
Gracias a los comentarios de @shomeser, escribió una biblioteca para hacer el botón fab:
https://github.com/shamanland/floating-action-button
Para usarlo:
dependencies {
compile ''com.shamanland:fab:0.0.3''
}
También puede leer su respuesta a otra pregunta: ¿Cómo puedo agregar el nuevo "Botón de acción flotante" entre dos widgets / diseños?
ACTUALIZADO: 30/05/2015 con la Biblioteca de Soporte de Diseño oficial
Hay un widget oficial ahora.
Solo agrega esta dependencia a tu build.gradle
compile ''com.android.support:design:22.2.0''
Añade esta vista a tu diseño:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="@drawable/ic_done" />
Y úsalo:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//TODO
}
});
Documentación:
ACTUALIZADO: 02/12/2014 con código de Android 5
También puedes agregar y stateListAnimator a tu botón:
<Button
android:stateListAnimator="@anim/anim"
/>
Donde anim.xml es:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="@dimen/button_elevation"
android:valueTo="@dimen/button_press_elevation"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="@dimen/button_press_elevation"
android:valueTo="@dimen/button_elevation"
android:valueType="floatType" />
</item>
</selector>
Dimens.xml es
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
Comprueba la respuesta de Daniele.
Sobre el esquema mencionado por Daniele. Agregue el atributo de elevación a su botón y configure el esquema mediante el código:
<ImageButton
android:background="@drawable/ripple"
android:stateListAnimator="@anim/anim"
android:src="@drawable/ic_action_add"
android:elevation="4dp"
/>
Sobre el esquema:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline: OLD METHOD IN L-PREVIEW
//int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
//Outline outline = new Outline();
//outline.setOval(0, 0, size, size);
//findViewById(R.id.fab).setOutline(outline);
Button fab = (Button) findViewById(R.id.fab);
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
// Or read size directly from the view''s width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);
}
};
fab.setOutlineProvider(viewOutlineProvider);
}
}
Google ahora proporciona una biblioteca oficial , llamada biblioteca de diseño, que contiene el Botón Fab . Solo agregue la siguiente dependencia de Gradle:
compile ''com.android.support:design:22.2.0''
Después puedes usar el botón fab como este:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Más información se puede encontrar en su anuncio.
http://android-developers.blogspot.ch/2015/05/android-design-support-library.html
o en la página javadoc
http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html