Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


¿Cómo puedo añadir el nuevo "botón de acción flotante" entre dos widgets / diseños

Supongo que ha visto las nuevas directrices de diseño de Android, con el nuevo "botón de acción flotante" aka "FAB"

Por ejemplo este botón rosado:

Introduzca aquí la descripción de la imagen

Mi pregunta suena estúpida, y ya he probado muchas cosas, pero ¿cuál es la mejor manera de poner este botón en la intersección de dos diseños?

En el ejemplo anterior, este botón está perfectamente situado entre lo que podemos imaginar ser un ImageView y un relativoLayout.

Ya he probado un montón de ajustes, pero estoy convencido de que hay una manera adecuada de hacerlo.

9 Solutions collect form web for “¿Cómo puedo añadir el nuevo "botón de acción flotante" entre dos widgets / diseños”

Mejores prácticas:

  • Añadir compile 'com.android.support:design:25.0.1' al archivo gradle
  • Utilice CoordinatorLayout como vista raíz.
  • Añada layout_anchor al FAB y ajústelo a la vista superior
  • Añada layout_anchorGravity al FAB y ajústelo en: bottom|right|end

Introduzca aquí la descripción de la imagen

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewA" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_purple" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewB" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom|right|end"/> </android.support.design.widget.CoordinatorLayout> 

Parece que la manera más limpia en este ejemplo es:

  • Utilizar un RelativeLayout
  • Coloque las 2 vistas adyacentes una debajo de la otra
  • Alinee el FAB con el derecho / extremo principal y agregue un margen derecho / final
  • Alinee el FAB a la parte inferior de la vista de cabecera y añada un margen negativo , la mitad del tamaño de la FAB, incluida la sombra

Ejemplo adaptado de la implementación del shamanland, use cualquier FAB que usted desee. Suponga que FAB es de 64dp de alto incluyendo sombra:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:id="@+id/header" android:layout_width="match_parent" android:layout_height="120dp" /> <View android:id="@+id/body" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/header" /> <fully.qualified.name.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignBottom="@id/header" android:layout_marginBottom="-32dp" android:layout_marginRight="20dp" /> </RelativeLayout> 

Ejemplo de diseño FAB

Puede importar el proyecto de ejemplo de Google en Android Studio haciendo clic en Archivo> Importar ejemplo …

Muestra de importación

Este ejemplo contiene una vista FloatingActionButton que hereda de FrameLayout.

Editar Con la nueva Biblioteca de Diseño de Soporte, puede implementarla como en este ejemplo: https://github.com/chrisbanes/cheesesquare

Con AppCompat 22, la FAB es compatible con dispositivos antiguos.

Agregue la nueva biblioteca de soporte en su build.gradle (app):

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

Entonces usted puede utilizarlo en su xml:

 <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@android:drawable/ic_menu_more" app:elevation="6dp" app:pressedTranslationZ="12dp" /> 

Para usar las propiedades de elevation y pressedTranslationZ , se necesita una app espacio de nombres, así que agrega este espacio de nombres a tu diseño: xmlns:app="http://schemas.android.com/apk/res-auto"

Ahora es parte de la Biblioteca Oficial de Diseño.

En su gradle:

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

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

Aquí hay una librería adicional gratuita de botón de acción flotante para Android . Tiene muchas personalizaciones y requiere SDK versión 9 y superior

Introduzca aquí la descripción de la imagen

Vídeo completo de demostración

 dependencies { compile 'com.scalified:fab:1.1.2' } 

Pruebe esta biblioteca ( javadoc está aquí ), el nivel mínimo API es 7:

 dependencies { compile 'com.shamanland:fab:0.0.8' } 

Proporciona un solo widget con capacidad para personalizarlo a través de Theme, xml o java-code.

ligeroEntre

Es muy simple de usar. Hay ejecución normal y mini disponible de acuerdo con el patrón Promoted Actions .

 <com.shamanland.fab.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_action_my" app:floatingActionButtonColor="@color/my_fab_color" app:floatingActionButtonSize="mini" /> 

Trate de compilar la aplicación de demostración . Hay un ejemplo exhaustivo: los temas claros y oscuros, que utilizan con ListView , se alinean entre dos vistas .

Keep it Simple Añadir botón de acción flotante utilizando TextView al dar fondo redondeado xml. – Añadir compile com.android.support:design:23.1.1 al archivo gradle

  • Utilice CoordinatorLayout como vista raíz.
  • Antes de finalizar el CoordinatorLayout introduzca un textView.
  • Dentro dibujable dibujar un círculo.

Círculo Xml es

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/colorPrimary"/> <size android:width="30dp" android:height="30dp"/> </shape> 

El diseño xml es

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="5" > <RelativeLayout android:id="@+id/viewA" android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1.6" android:background="@drawable/contact_bg" android:gravity="center_horizontal|center_vertical" > </RelativeLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="3.4" android:orientation="vertical" android:padding="16dp" android:weightSum="10" > <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" > </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Name" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/name" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Ritesh Kumar Singh" android:singleLine="true" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Phone" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/number" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="8283001122" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Email" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="ritesh.singh@betasoftsystems.com" android:textSize="22dp" android:singleLine="true" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="City" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Panchkula" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> </LinearLayout> </LinearLayout> <TextView android:id="@+id/floating" android:transitionName="@string/transition_name_circle" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="16dp" android:clickable="false" android:background="@drawable/circle" android:elevation="10dp" android:text="R" android:textSize="40dp" android:gravity="center" android:textColor="@android:color/black" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom"/> </android.support.design.widget.CoordinatorLayout> 

Haga clic aquí para ver cómo se verá

Agregue esto a su archivo gradle

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.0' compile 'com.android.support:design:23.0.1' } 

Esto a tu activity_main.xml

 <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewOne" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_blue_light" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewTwo" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/floatingButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewOne" app:layout_anchorGravity="bottom|right|end" app:backgroundTint="#FF0000" app:rippleColor="#FFF" /> </android.support.design.widget.CoordinatorLayout> 

Usted puede encontrar el ejemplo completo con el proyecto de estudio de Android para descargar en http://www.ahotbrew.com/android-floating-action-button/

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.