Android Design Support Library (II): FloatActionButton

Una semana más seguimos con la serie de tutoriales donde aprenderemos como utilizar Android Design Support Library, en esta ocasión veremos como utilizar el FloatActionButton.En el anterior preparamos todos los elementos necesarios para hacer uso de estar fantástica librería, además de implementar el Toolbar.

FloatActionButton

¿Qué es el FloatActionButton? Es un botón, que se está poniendo muy de moda, especialemente en la aplicaciones de Google. Este botón se posiciona flotando por encima de la interfaz principal, normalmente listas, y que añade una acceso rápido a una funcionalidad de uso frecuente, haciéndolo así más fácil su utilización.

Show me the code

Su implementación no podría ser más sencilla, si tomamos como base el Layout que preparamos en el pasado tutorial con el Toolbar, se quedaría de la siguiente manera: <RelativeLayout 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"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_action_search" android:layout_marginBottom="20dp" android:layout_marginRight="20dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" app:fabSize="normal" /> </RelativeLayout>(En el atributo src he añadido un icono de ejemplo, vosotros podéis utilizar el que más os convenga). Y su utilización lógica es idéntica que cualquier otro Button de los que estamos acostumbrados a utilizar normalmente. Si vemos la clase principal, tendría este aspecto: public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setupToolbar(); setupFAB(); } private void setupToolbar() { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } private void setupFAB() { FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Do something cool } }); } } Y de esta manera tan fácil tendremos nuestro FAB implementado.

Recordad que tenéis todo el código en el repositorio de GitHub. Nota importante: Los que me conozcan sabrán que soy un poco pesado con el tema de la usabilidad, y mi demonio interno me obliga a advertir que este widget puede ser fácilmente mal utilizado, puesto que estamos tentados a ponerlo todo con FABs. No caigáis en ese error, está pensado para usarse con funciones que se usan frecuentemente, de usarse para otra cosa, acabaremos por tener un botón por encima de nuestra interfaz principal que prácticamente nos estorba más que nos ayuda.