FAB with an anchor in the layout of the coordinator has an additional margin in the android before candy

Question

I have a CoordinatroLayout with a FloatingActionButton . Here is my code:

 <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:layout_below="@+id/toolbar_layout" android:layout_above="@+id/actionbar"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="120dp" android:minHeight="?android:attr/actionBarSize" android:background="@color/toolbar_color" /> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content" > </ScrollView> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" app:fabSize="mini" android:src="@mipmap/ic_action_edit" app:layout_anchor="@id/toolbar" app:layout_anchorGravity="bottom|right|end" app:backgroundTint="@color/toolbar_color" /> </android.support.design.widget.CoordinatorLayout> 

But it looks different in devices with a lollipop and before Lellipops.

Lollipop:

Pre-Lollipop:

In fact, I am not adding any fields. But FAB has an advantage in pre-cooled devices.

I also saw this problem in the cheessesquare example. It also shows different fields. What is the problem?

Answer 1

I don’t think you want to place them borderless. If I understood it correctly, you did it to see what happens in different versions of Android.

You can use app:useCompatPadding="true" and remove custom fields to support the same fields in different versions of android

Proof of concept

Answer 2

According to this link , this seems to be a bug in the Android design library. It states that:

in API <20, the button creates its own shadow, which adds to the overall logical width of the view, while in API> = 20 it uses the new Height Settings, which do not affect the width of the view.

Therefore, I have to provide two resource files for the field:

RES / values:

 <dimen name= "fab_margin_right">0dp</dimen> 

And in res / values-v21:

 <dimen name = "fab_margin_right">8dp</dimen> 

Answer 3

Since the support and design library version is version 22.2.1, the previous answer is no longer correct. There is no additional addition if the FAB is inside the CoordinatorLayout.

 <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/button_show_qr" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@mipmap/ic_action_edit" app:backgroundTint="@color/primary" app:borderWidth="0dp" app:elevation="4dp" app:fabSize="normal" app:rippleColor="@color/primary_dark"/> </android.support.design.widget.CoordinatorLayout> 

This code will produce the following FAB for each version of Android.