Andres Camacho Andres Camacho - 5 months ago 19
Android Question

FAB (floating action button) doesn't float

I've tried to use the floatingactionbutton element but it doesn't float in UI layout, the floating button occupies part of the layout and isn't over the component, in my case is a viewpager,

button doesn't float

this is my layout:

<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.frases.frases.FraseMain"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/white" />

<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_dialog_email" />


</LinearLayout>

Answer

It's because you are using LinearLayout as the root layout. You need FrameLayout to stack elements over one another, and FAB needs to be the last child node because it needs to stay on top of every other views.

<FrameLayout>
  <LinearLayout>
    ...
  </LinearLayout>

  <!-- FAB be the last node inside FrameLayout here -->
  <android.support.design.widget.FloatingActionButton />
</FrameLayout>
Comments