Search code examples
androidandroid-layoutfloating-action-button

Extra margin(spacing) around FloatingActionButton only on API 19


I'm experiencing an extra margin or spacing around FloatingActionButton but only on API19.

Screenshot on API19:

enter image description here

Margin is correct on every other version, see screenshot below:

enter image description here

The developer option for showing layout boundaries is turned on in both cases. You can clearly see that in API 19 there is an extra space around the FABs.

XML:

      <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <android.support.design.widget.FloatingActionButton
                            android:id="@+id/path_btn"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="12dp"
                            android:layout_marginRight="12dp"
                            android:layout_marginTop="12dp"
                            android:background="@null"
                            app:backgroundTint="@color/blue_light"
                            app:srcCompat="@drawable/ic_line" />

                        <android.support.design.widget.FloatingActionButton
                            android:id="@+id/stream_toggle_btn"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/path_btn"
                            android:layout_marginBottom="12dp"
                            android:layout_marginLeft="12dp"
                            android:layout_marginTop="12dp"
                            android:background="@null"
                            app:srcCompat="@drawable/ic_stream_video_white" />
                    </RelativeLayout>

Please consider that the margins in the XML only adds the purple area on the screenshots. If I remove the margins the extra spacing does not disappear.

Please help if you can.

Thanks.

E D I T:

Adding

  app:useCompatPadding="true"

To FABS does not help. Spacing still there.


Solution

  • You can programmatically remove margin from floatingActionButton like.It is a known issue and it is because of extra margin.

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) stream_toggle_btn.getLayoutParams();
        params.setMargins(0, 0, 0, 0); 
        stream_toggle_btn.setLayoutParams(params);
    
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) path_btn.getLayoutParams();
        params.setMargins(0, 0, 0, 0); 
        path_btn.setLayoutParams(params);
    }
    

    EDIT

    Try to use this properties inside FloatingActionButton xml.

    app:elevation="0dp"
    app:pressedTranslationZ="0dp"
    

    Like

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/path_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_marginTop="12dp"
        android:background="@null"
        app:backgroundTint="@color/blue_light"
        app:srcCompat="@drawable/ic_line"
        app:elevation="0dp"
        app:pressedTranslationZ="0dp"/>