FloatingActionButton, layout_anchor and layout_gravity

Question

A little new here. I have been developing Android for two months, but I have many years of development experience in other environments.

Good. I have a FloatingActionButton that didn't show where I expected it or wanted it. It is inside a CoordinatorLayout , along with the AppBarLayout / Toolbar and after a ListView .

Here is the layout:

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/fragment_coordinator" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".ViewVehicleList"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:title="Vehicle List" app:layout_scrollFlags="scroll|enterAlways|snap" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </android.support.design.widget.AppBarLayout> <ListView android:id="@+id/Vehicle_ListView" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="#FFFFFF" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </ListView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_AddVehicle" style="@style/FloatingAddButton" android:src="@drawable/ic_green_add" android:layout_gravity="bottom|end" app:layout_anchor="@id/Vehicle_ListView" android:onClick="addVehicle"/> </android.support.design.widget.CoordinatorLayout> 

In this layout, the screen looks like this:

My layout_gravity says "bottom|end" . I changed it to "bottom|right" , but got the same result. I read a lot of tutorials and explored Stack Overflow, and I was out of luck.

I managed to solve this problem by removing the anchor specified in the FAB app:layout_anchor="@id/Vehicle_ListView" element app:layout_anchor="@id/Vehicle_ListView" , which seems to work according to what I read: to use FAB and position it correctly, you need to use layout_anchor and layout_gravity . Without a binding label, it looks like this:

So here is my question: why does my anchor twist the layout of my FloatingActionButton ? What am I doing wrong?

-boster

Answer 1

You just need to add layout_anchorGravity .

 <android.support.design.widget.FloatingActionButton android:id="@+id/fab_AddVehicle" style="@style/FloatingAddButton" android:src="@drawable/ic_green_add" android:onClick="addVehicle" app:layout_anchor="@id/Vehicle_ListView" app:layout_anchorGravity="bottom|end" />