CODEWITHSUNDEEP
androidandroid-support-libraryfloating-action-button
Cocorico
Cocorico

Reputation: 2018

Is this a bug in Android support design Library?

I just started to use the new Deisgn library from Google : 'com.android.support:design:22.2.0'

I use the FloatingActionButton and I have a small issue between Android below 5.0 and over 5.0. Watch the screenshot :

Android 4.4 :

Android 4.4

Android 5.0 : Android 5.0

As you can see, on Android 4.4, there is a margin around the FAB. I think this is for displaying the shadow. But IT'S OVERSIZED ! So is it a bug (or a forget of Google) or just the normal behavior ?

The xml of the view hosting he fabs : 

<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="fr.freemo.freemo.activities.ListFreemoCityActivity">

<include
    android:id="@+id/toolbar"
    layout="@layout/view_toolbar" />


<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar">

</FrameLayout>


<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="@dimen/margin_fab"
    android:layout_marginRight="@dimen/margin_fab"
    android:elevation="@dimen/fab_elevation_lollipop"
    android:src="@drawable/ic_action_new"
    app:backgroundTint="@color/color_app"
    app:fab_type="normal" />


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_display"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/fab_add"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="@dimen/margin_fab"
    android:layout_marginRight="@dimen/margin_fab"
    android:elevation="@dimen/fab_elevation_lollipop"
    android:src="@drawable/ic_map_white"
    android:tint="@color/color_app"
    app:backgroundTint="@color/white"
    app:fab_type="normal" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_display_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/fab_display"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="@dimen/margin_fab"
    android:layout_marginRight="@dimen/margin_fab"
    android:elevation="@dimen/fab_elevation_lollipop"
    android:src="@drawable/ic_action_list"
    android:tint="@color/color_app"
    android:visibility="invisible"
    app:backgroundTint="@color/white"
    app:fab_type="normal" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_display_grid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/fab_display_list"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="@dimen/margin_fab"
    android:layout_marginRight="@dimen/margin_fab"
    android:elevation="@dimen/fab_elevation_lollipop"
    android:src="@drawable/ic_view_module_white"
    android:tint="@color/color_app"
    android:visibility="invisible"
    app:backgroundTint="@color/white"
    app:fab_type="normal" />
   </RelativeLayout>

Upvotes: 8

Views: 1371

Answers (3)

Lampione
Lampione

Reputation: 1608

This has been specified to not being an actual bug. Instead, this is the expected behavior.

Quoting a google dev answer:

This isn't a bug and is working as intended, in the sense that it's something that which is completely unavoidable. Within a CoordinatorLayout we have some control and can detect certain situations (edges) where it can offset the FAB. This is a hack though.

If you don't like it, set elevation to 0dp and be done with it.

As someone other stated here, we should define

xmlns:app="http://schemas.android.com/apk/res-auto"
app:borderWidth="0dp"
app:elevation="0dp"

or, even better, define your elevation in dimens.xml based on the API version you are working with. Most common case would be:

<!-- dimens.xml(v21) -->
<dimen name="custom_fab_elevation">@dimen/fab_elevation</dimen>

<!-- dimens.xml(lower) -->
<dimen name="custom_fab_elevation">0dp</dimen>

Upvotes: 0

Penzzz
Penzzz

Reputation: 2993

Its a bug for API 21. You can make arrow visible by removing some margin. Here is the way You can solve it and after testing on different devices it seems to work:

https://stackoverflow.com/a/31337162/3173384

Edited

Bug has already been fixed. Just update all support libraries to v 22.2.1

compile 'com.android.support:design:22.2.1'
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'

Upvotes: 0

makovkastar
makovkastar

Reputation: 5020

It was an issue (check a bug report created by me: https://code.google.com/p/android/issues/detail?id=175330) and should be fixed in the future release of the support-design library.

Upvotes: 3

Related Questions