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>
Add the floating action button to your layoutThe size of the FAB, using the app:fabSize attribute or the setSize() method. The ripple color of the FAB, using the app:rippleColor attribute or the setRippleColor() method. The FAB icon, using the android:src attribute or the setImageDrawable() method.
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>
I don't think you have to use coordinator layout, you can simply use floating button with below code as well.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/dashboard_bg"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- here you can have your viewpager -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/dashboardShowActionsFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="4dp"
app:fabSize="normal"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="26dp"
android:layout_marginBottom="16dp" />
</RelativeLayout>
Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With