{"id":1675,"date":"2018-10-31T12:54:49","date_gmt":"2018-10-31T18:54:49","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1675"},"modified":"2018-10-31T23:12:06","modified_gmt":"2018-11-01T05:12:06","slug":"crear-un-floating-action-button-en-android","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/crear-un-floating-action-button-en-android\/","title":{"rendered":"Crear un Floating Action Button en Android"},"content":{"rendered":"

Un Floating Action Button es un bot\u00f3n circular flotante que aparece en la parte inferior derecha de la pantalla que nos permite ejecutar una acci\u00f3n habitual dentro de una aplicaci\u00f3n. Com\u00fanmente se abrevia como FAB y es un elemento de interfaz bastante utilizado junto con elementos ListView.\u00a0Veamos c\u00f3mo utilizarlo en nuestra aplicaci\u00f3n.<\/strong><\/em><\/p>\n

<\/p>\n

Abre tu archivo activity_main.xml<\/strong><\/em> (el que tiene el dise\u00f1o de la app).<\/p>\n

En el archivo activity_main.xml<\/strong><\/em> vamos a colocar un componente ListView.\u00a0 \u00a0<\/span><\/p>\n

<ListView\r\n\u00a0 \u00a0 android:id=\"@+id\/listView\"\r\n\u00a0 \u00a0 android:layout_width=\"match_parent\"\r\n\u00a0 \u00a0 android:layout_height=\"match_parent\"\r\n\u00a0 \u00a0 android:layout_marginBottom=\"8dp\"\r\n\u00a0 \u00a0 android:layout_marginTop=\"8dp\"\r\n\u00a0 \u00a0 app:layout_constraintBottom_toBottomOf=\"parent\"\r\n\u00a0 \u00a0 app:layout_constraintTop_toTopOf=\"parent\"\r\n\u00a0 \u00a0 app:layout_constraintEnd_toEndOf=\"parent\"\r\n\u00a0 \u00a0 tools:layout_editor_absoluteX=\"2dp\" \/><\/pre>\n
Para utilizar el Floating Action Button debemos agregar una nueva librer\u00eda.<\/p>\n
Agregar librer\u00eda a gradle<\/h2>\n
En el archivo gradle (\/app\/build.gradle),<\/em> en la secci\u00f3n de dependencias (dependencies<\/em>) a\u00f1adimos esta linea:<\/p>\n
compile \u2018com.android.support:design:26.+\u2019<\/strong><\/p>\n
Mi archivo gradle lleva esta apariencia (no debe ser id\u00e9ntico en tu caso).\u00a0<\/span><\/p>\n
\"Librer\u00eda<\/a>
Librer\u00eda necesaria para el Floating Action Button<\/p><\/div>\n
Estoy usando ..design:26+ considerando que tengo compileSdkVersion 26<\/em> (puedes verlo en la imagen anterior).<\/p>\n
Sincronizamos dando clic en Sync Now.<\/p>\n
Agregar un Floating Action Button<\/h2>\n
Volvemos a activity_main.xml<\/strong> y ya podemos colocar un Floating Action Button<\/p>\n
 <android.support.design.widget.FloatingActionButton\r\n        android:id=\"@+id\/fabAddBoard\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:src=\"@drawable\/ic_fab_add\"\r\n        android:layout_marginBottom=\"8dp\"\r\n        android:layout_marginEnd=\"8dp\"\r\n        app:layout_constraintBottom_toBottomOf=\"@+id\/listView\"\r\n        app:layout_constraintEnd_toEndOf=\"@+id\/listView\" \/><\/pre>\n
Eso es todo para agregar un Floating Action Button, lo puedes utilizar como un bot\u00f3n normal dentro de tu proyecto Android.<\/p>\n
Agregar una imagen al Floating Action Button<\/h2>\n
\u00c9sta l\u00ednea:\u00a0 <\/span>android:src=\u201c@drawable\/ic_fab_add\u00bb<\/strong><\/em> indica la imagen que tendr\u00e1 nuestro bot\u00f3n, en \u00e9ste caso un signo de m\u00e1s (+). Los pasos que se siguen para agregar esa imagen a nuestro proyecto son los siguientes: (en caso de que a\u00fan no sepas hacerlo).<\/p>\n
Ve a File -> New -> Image Asset<\/strong><\/em><\/p>\n
En Icon Type<\/strong><\/em> seleccionamos Action Bar…<\/p>\n
En Name<\/strong><\/em> escribimos el nombre que daremos a la imagen. En mi caso utilic\u00e9 id_fab_add<\/em><\/p>\n
En asset<\/strong> type<\/strong><\/em> elijo Image<\/p>\n
En Path<\/strong><\/em>, eligo la imagen png con el signo de mas (+). Si no cuentas con iconos puedes utilizar https:\/\/materialdesignicons.com<\/a>, buscando el que m\u00e1s te guste y se adapte al proyecto.<\/p>\n
\"Algunos<\/a>
Algunos iconos disponibles en materialdesignicons.com<\/p><\/div>\n
Pulsa Next.<\/p>\n
Pulsa Finish.<\/p>\n","protected":false},"excerpt":{"rendered":"
Un Floating Action Button es un bot\u00f3n circular flotante que aparece en la parte inferior derecha de la pantalla que nos permite ejecutar una acci\u00f3n habitual dentro de una aplicaci\u00f3n. Com\u00fanmente se abrevia como FAB y es un elemento de interfaz bastante utilizado junto con elementos ListView.\u00a0Veamos c\u00f3mo utilizarlo en nuestra aplicaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[234],"tags":[198,235,244,238,243],"class_list":["post-1675","post","type-post","status-publish","format-standard","hentry","category-aplicaciones-moviles","tag-android","tag-desarrollo-de-aplicaciones-moviles","tag-list","tag-listview","tag-realm"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1675"}],"version-history":[{"count":7,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1675\/revisions"}],"predecessor-version":[{"id":1697,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1675\/revisions\/1697"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}