Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear un Floating Action Button Menu en Android

Android Floating Action Button Menu Example


Hola amigos en esta ocasión vamos a crear un menu flotante con el control Floating Action Button.
Android Studio - Floating Action Button Menu



Crear Proyecto Android Floating Action Button (Aquí)

Crearemos un proyecto para nuestra aplicación de la siguiente forma y teniendolo listo continuaremos.


Android Studio - Floating Action Button Menu

Diseño Android Floating Action Button

Vamos a crear el diseño de nuestra aplicación. En el archivo activity_main.xml


<?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"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context=".MainActivity">

 <android.support.design.widget.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/AppTheme.AppBarOverlay">

 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="?attr/colorPrimary"
 app:popupTheme="@style/AppTheme.PopupOverlay" />

 </android.support.design.widget.AppBarLayout>

 <include layout="@layout/content_main" />
 <View
 android:id="@+id/fabBGLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/colorTransBg"
 android:visibility="gone"/>
 <LinearLayout
 android:id="@+id/fabLayout1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginRight="@dimen/standard_23"
 android:padding="@dimen/standard_12"
 android:clipToPadding="false"
 app:layout_behavior="com.example.blackjack.floatingactionbuttonmenu.utils.MoveUpwardBehavior"
 android:gravity="center_vertical"
 android:layout_marginBottom="@dimen/standard_23"
 android:layout_gravity="bottom|end"
 android:visibility="gone">
 <!-- if you are not using Snackbar with this activity then remove below line from every place of the file:
 app:layout_behavior="com.ajaysinghdewari.floatingactionbuttonmenu.activities.utils.MoveUpwardBehavior"
 the above line enables the view to Scrolls up with the snackbar as, the FAB do automaticaly scrolls up
 when the snackbar appear, so if snackbar is not used please remove the above line from every view present in the xml-->
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FabTitle1"/>

 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 app:srcCompat="@android:drawable/ic_dialog_email"
 app:fabSize="mini"/>
 </LinearLayout>

 <LinearLayout
 android:id="@+id/fabLayout2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:padding="@dimen/standard_12"
 android:clipToPadding="false"
 android:layout_marginRight="@dimen/standard_23"
 android:gravity="center_vertical"
 app:layout_behavior="com.example.blackjack.floatingactionbuttonmenu.utils.MoveUpwardBehavior"
 android:layout_marginBottom="@dimen/standard_23"
 android:layout_gravity="bottom|end"
 android:visibility="gone">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FabTitle2"/>

 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 app:srcCompat="@drawable/ic_camera"
 app:fabSize="mini"/>
 </LinearLayout>


 <LinearLayout
 android:id="@+id/fabLayout3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:padding="@dimen/standard_12"
 android:clipToPadding="false"
 android:layout_marginRight="@dimen/standard_23"
 android:gravity="center_vertical"
 android:layout_marginBottom="@dimen/standard_23"
 app:layout_behavior="com.example.blackjack.floatingactionbuttonmenu.utils.MoveUpwardBehavior"
 android:layout_gravity="bottom|end"
 android:visibility="gone">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FabTitle3"/>

 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 app:srcCompat="@drawable/ic_mic"
 android:tint="@android:color/white"
 app:fabSize="mini"/>
 </LinearLayout>


 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginRight="@dimen/fab_margin"
 android:gravity="center_vertical"
 android:clipToPadding="false"
 app:layout_behavior="com.example.blackjack.floatingactionbuttonmenu.utils.MoveUpwardBehavior"
 android:padding="@dimen/standard_12"
 android:layout_marginBottom="@dimen/fab_margin"
 android:layout_gravity="bottom|end">


 <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:gravity="center_vertical"
 app:srcCompat="@drawable/ic_toys"
 app:fabSize="normal"/>
 </LinearLayout>

</android.support.design.widget.CoordinatorLayout>
Agregaremos los siguientes archivos en drawable para nuestro menu Floating Action Button.

ic_camera.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M20,4h-3.17L15,2L9,2L7.17,4L4,4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM12,7c1.63,0 3.06,0.79 3.98,2L12,9c-1.66,0 -3,1.34 -3,3 0,0.35 0.07,0.69 0.18,1L7.1,13c-0.06,-0.32 -0.1,-0.66 -0.1,-1 0,-2.76 2.24,-5 5,-5zM12,17c-1.63,0 -3.06,-0.79 -3.98,-2L12,15c1.66,0 3,-1.34 3,-3 0,-0.35 -0.07,-0.69 -0.18,-1h2.08c0.07,0.32 0.1,0.66 0.1,1 0,2.76 -2.24,5 -5,5z"
android:fillColor="#FFFFFF"/>
</vector>
ic_mic.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M12,14c1.66,0 2.99,-1.34 2.99,-3L15,5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6c0,1.66 1.34,3 3,3zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11L5,11c0,3.41 2.72,6.23 6,6.72L11,21h2v-3.28c3.28,-0.48 6,-3.3 6,-6.72h-1.7z"
android:fillColor="#000000"/>
</vector>
ic_toys.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M12,12c0,-3 2.5,-5.5 5.5,-5.5S23,9 23,12L12,12zM12,12c0,3 -2.5,5.5 -5.5,5.5S1,15 1,12h11zM12,12c-3,0 -5.5,-2.5 -5.5,-5.5S9,1 12,1v11zM12,12c3,0 5.5,2.5 5.5,5.5S15,23 12,23L12,12z"
android:fillColor="#FFFFFF"/>
</vector>
Ahora agregaremos en colors.xml

<color name="colorTransBg">#26000000</color>
En el archivo dimens.xml añadiremos lo siguiente.

<dimen name="fab_margin">16dp</dimen>

<dimen name="standard_12">12dp</dimen>
<dimen name="standard_23">23dp</dimen>
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_100">100dp</dimen>
<dimen name="standard_145">145dp</dimen>
Ahora continuamos con lo siguiente.

Código MaintAcitivity Floating Action Button Menu.

Ahora vamos a crear el código de nuestra aplicación para desarrollar este ejemplo y abriremos el archivo MaintActivity.

Añadiremos un paquete y crearemos utils donde crearemos la siguiente clase. MoveUpwardBehavior.


import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Ajay on 07-03-2017.
 */

//Use this class only if you want toslide up the FAB whenever the seekbar appear, if u don't want this funcionality delete this file
public class MoveUpwardBehavior extends CoordinatorLayout.Behavior<View> {
 public MoveUpwardBehavior() {
 super();
 }

 public MoveUpwardBehavior(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 @Override
 public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
 return dependency instanceof Snackbar.SnackbarLayout;
 }

 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
 float translationY = Math.min(0, ViewCompat.getTranslationY(dependency) - dependency.getHeight());
 ViewCompat.setTranslationY(child, translationY);
 return true;
 }

 //you need this when you swipe the snackbar(thanx to ubuntudroid's comment)
 public void onDependentViewRemoved(CoordinatorLayout parent, View child, View dependency) {
 ViewCompat.animate(child).translationY(0).start();
 }
}
Y agregaremos el siguiente código en nuestro MaintActivity.


import android.animation.Animator;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

 FloatingActionButton fab, fab1, fab2, fab3;
 LinearLayout fabLayout1, fabLayout2, fabLayout3;
 View fabBGLayout;
 boolean isFABOpen=false;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 fabLayout1= (LinearLayout) findViewById(R.id.fabLayout1);
 fabLayout2= (LinearLayout) findViewById(R.id.fabLayout2);
 fabLayout3= (LinearLayout) findViewById(R.id.fabLayout3);
 fab = (FloatingActionButton) findViewById(R.id.fab);
 fab1 = (FloatingActionButton) findViewById(R.id.fab1);
 fab2= (FloatingActionButton) findViewById(R.id.fab2);
 fab3 = (FloatingActionButton) findViewById(R.id.fab3);
 fabBGLayout=findViewById(R.id.fabBGLayout);

 fab.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 if(!isFABOpen){
 showFABMenu();
 }else{
 closeFABMenu();
 }
 }
 });

 fabBGLayout.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 closeFABMenu();
 }
 });
 }

 private void showFABMenu(){
 isFABOpen=true;
 fabLayout1.setVisibility(View.VISIBLE);
 fabLayout2.setVisibility(View.VISIBLE);
 fabLayout3.setVisibility(View.VISIBLE);
 fabBGLayout.setVisibility(View.VISIBLE);

 fab.animate().rotationBy(180);
 fabLayout1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
 fabLayout2.animate().translationY(-getResources().getDimension(R.dimen.standard_100));
 fabLayout3.animate().translationY(-getResources().getDimension(R.dimen.standard_145));
 }

 private void closeFABMenu(){
 isFABOpen=false;
 fabBGLayout.setVisibility(View.GONE);
 fab.animate().rotationBy(-180);
 fabLayout1.animate().translationY(0);
 fabLayout2.animate().translationY(0);
 fabLayout3.animate().translationY(0).setListener(new Animator.AnimatorListener() {
 @Override
 public void onAnimationStart(Animator animator) {

 }

 @Override
 public void onAnimationEnd(Animator animator) {
 if(!isFABOpen){
 fabLayout1.setVisibility(View.GONE);
 fabLayout2.setVisibility(View.GONE);
 fabLayout3.setVisibility(View.GONE);
 }

 }

 @Override
 public void onAnimationCancel(Animator animator) {

 }

 @Override
 public void onAnimationRepeat(Animator animator) {

 }
 });
 }

 @Override
 public void onBackPressed() {
 if(isFABOpen){
 closeFABMenu();
 }else{
 super.onBackPressed();
 }
 }
}

Y por ultimo.

Crear Emulador AVD (Aquí)

Ahora crearemos nuestro emulador para ejecutar nuestro ejemplo y ver nuestro Floating Action Button Menu en ejecución.
Android Studio - Floating Action Button Menu

Android Studio - Floating Action Button Menu



Curso Kotlin Español


No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner