Añadir un Floating Action Button en Android

Añadir un Floating Action Button en Android

Un Floating Action Button Button (FAB) es un elemento visual introducido en Material design, y su objetivo es destacar una acción principal de nuestra aplicación. Se caracteriza por tener una forma circular, un icono en su interior y estar situado en la esquina inferior derecha de nuestra pantalla (aunque a veces esta incrustado en otros elementos de la aplicación).

¿Cómo añadir un Floating Action Button en nuestra aplicación?

  1. Añadir en build.gradle las ultimas dependencias de la librería appcompat y la librería android support design y sincronizar Gradle:
    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 24
        buildToolsVersion "24.0.1"
    
        defaultConfig {
            applicationId "com.aprendiendoingenieria.floatingactionbutton"
            minSdkVersion 15
            targetSdkVersion 24
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.1.1'
        compile 'com.android.support:design:24.1.1'
    } 
  2. Agregar el FAB a nuestra vista activity_main.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.aprendiendoingenieria.floatingactionbutton.MainActivity">
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/play_48"
            android:layout_gravity="end|bottom"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"></android.support.design.widget.FloatingActionButton>
    
    
    </RelativeLayout></pre>
    <pre>
    • Donde android.support.design.widget.FloatingActionButton es la etiqueta para representar el view del FAB.
    • android:src: Establece el icono del floating Action Button. Puedes descargar iconos para tu aplicación en icon8.
  3. Ponemos el evento OnClickListener en MainActivity.java para mostrar una acción al pulsar el FAB:
    package com.aprendiendoingenieria.floatingactionbutton;
    
    import android.support.design.widget.FloatingActionButton;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Toast;
    
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //Inicializamos el FAB en el oncreate llamando al metodo que hemos creado
            agregarFAB();
    
        }
        
        //Metodo que añade el FAB
        public void agregarFAB(){
            //Inicializamos el FAB
            FloatingActionButton miFAB = (FloatingActionButton) findViewById(R.id.fab);
            //Creamos el evento setOnClickListener para que se ejecute una accion al pulsar el FAB.
            miFAB.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //Codigo que se ejecuta al pulsar el FAB.
                    Toast.makeText(MainActivity.this, "Boton Pulsado", Toast.LENGTH_SHORT).show();
                    //En este caso mostrara un Toast con el mensaje "Boton pulsado".
                }
            });
        }
    }

Al pulsar el FAB, se  mostrara:

Captura boton flotante android
captura de un floating action button

Deja un comentario

Cerrar menú