I read some posts here about this problem, but I couldn't get display the FAB. I tried different ways, but I don't really what's going on.
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="@color/colorPrimary"
android:elevation="@dimen/elevation_toolbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_marginLeft="@dimen/list_toolbar_side_margin"
android:layout_marginRight="@dimen/list_toolbar_side_margin"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextAppearance="@style/AppTabTextAppearance"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_id"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_add"
/>
If it checks the preview in android studio, the fab is there. Even, when I debug the app, I can see that the fab is created.
I attempted too using a app:layout_anchor="@id/viewpager" or app:layout_anchor="@id/app_bar_layout" with **app:layout_anchorGravity="bottom|right" ** and it didn't work. The FAB is covered by the viewpager. How can I avoid that?
I attach an image of the main activity. You will see a button "add plant". This button should be replaced by the FAB.
Try to insert the floatingActionButton into frameLayout and insert this layout to your main layout.. it works for me
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
<FrameLayout
android:id="@+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add_room"
android:layout_width="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="@drawable/ic_add"
app:fabSize="normal" />
</FrameLayout>
.
.
.
</android.support.constraint.ConstraintLayout>
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