Fab from support library not visible on Loliloop

Question

I am implementing Fab. It is shown on devices API < 21 but it is not shown on devices with API >= 21

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/transparent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:background="@color/background_chart"

        android:clickable="true">


        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@color/white_20"
            android:dividerHeight="1dip"
            android:footerDividersEnabled="false"
             />


    </RelativeLayout>

    <FrameLayout
        android:id="@+id/toolbar_shadow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:background="@drawable/bottom_shadow"
        android:foreground="@drawable/bottom_shadow" />

     <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_marginTop="@dimen/fab_margin_top"
    android:layout_marginRight="@dimen/fab_margin_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_add"
    app:borderWidth="0dp"
    app:elevation="6dip"
    app:pressedTranslationZ="12dp" />
</RelativeLayout>

How to show it for all api >=15?

Edit: problem seems to be caused by 2 reasons. 1) in pre lollipop app:pressedTranslationZ="12dp" moves FAB down (like margin top, where in lollipop it does not work as margin top any more, bat changes elevation of pressed state.
2) button is placed under layout with elevation 4 (toolbar), i tried to set different app:elevation and android:elevation for FAB, but it does not change anything.

score 1 · Accepted Answer · answered Oct 06 '15 at 15:26

First of all API 20 is Kitkat 4.4.2 while 21+ is Lollipop and 23+ would be Marshmallow

In your case possibility that it is hidden behind the action bar try and check for changes...

Margin issue in Android 4.4 and 5.0 with FAB - There is a margin issue in Lollipop. To resolve this issue, define the top and the right margin both with 16dp for API 21+ and both with 0dp for pre-lollipop.

values/dimens.xml

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

values-v21/dimens.xml

<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_top">16dp</dimen>

and refer the same values in your FAB inside layout:

<android.support.design.widget.FloatingActionButton
   ...
   ...
   android:layout_marginTop="@dimen/fab_margin_top"
   android:layout_marginRight="@dimen/fab_margin_right"/>

Reference :

its partially solved problem, now FAB is visible if toolbar does not have elevation, but if i return elevation to toolbar, FAB is alwas behind it, despite fab own elevation. — Yarh, Oct 06 '15 at 17:08

score 1 · Answer 2 · answered Mar 22 '16 at 20:34

1

Try moving the FABin the xml before the FrameLayout or even before the RelativeLayout. I had a similar problem when I added DrawerLayout to my xml file. When I moved the FABbefore the DrawerLayout in the xml file, the FABshowed up.

answered Mar 22 '16 at 20:34

Zvi

2,354
2
26
37

Kuffs · Answer 3 · 2015-10-06T15:21:15.017

0

Increase the elevation value. It is likely layered behind another UI element.

In Lollipop and above, the elevation controls the "layer" that an element will be drawn at.

edited Oct 06 '15 at 15:21

answered Oct 06 '15 at 15:14

Kuffs

35,581
10
79
92

FAB is visible if toolbar does not have elevation, but if i return elevation to toolbar, FAB is alwas behind it, despite fab own elevation. – Yarh Oct 06 '15 at 17:09

Fab from support library not visible on Loliloop

3 Answers3