Search code examples
javaandroidfloating-action-button

FAB blocked by ViewPager

My floating action bar is blocked by viewpager that I have in the same page.

I would like to add FAB to the intent himselfs and not to the fragment that inside the viewpager, so I've added to my main layout file this code:

   <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:elevation="10dp"
        android:padding="10dp"
        android:src="@mipmap/pluscircle" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_below="@+id/sliding_tabs"
    android:layoutDirection="ltr"
    android:layout_height="match_parent" />

But for some reason my FAB is appearing below the tablayout and above viewPager like this: FAB error

How can I fix the FAB location so he wont be blocked by viewPager?

Solution

  • Use a FrameLayout with layout_gravity also apply android:clickable="true" to the root layout.

        <FrameLayout 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:clickable="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:clickable="true"
        android:elevation="10dp"
        android:padding="10dp"
        android:src="@mipmap/ic_launcher" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/sliding_tabs"
        android:layoutDirection="ltr" />
</FrameLayout>