Clans / FloatingActionButton

Android Floating Action Button based on Material Design specification
Apache License 2.0
5.22k stars 1.13k forks source link

Transparency bug #136

Closed lolobosse closed 8 years ago

lolobosse commented 9 years ago

Hi there,

I think I spotted a bug: the overlay caused by fab:menu_backgroundColor

If you have button like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="102dp"
        android:background="@color/app_primary"
        android:elevation="4dp"
        android:ellipsize="end"
        android:fontFamily="sans-serif-light"
        android:maxLines="3"
        android:paddingLeft="60dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:text="@string/lorem_ipsum"
        android:textColor="@android:color/white"
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/test_text"
        android:src="@drawable/ic_close"/>

    <ImageButton
        android:id="@+id/ibutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/image"
        android:src="@drawable/ic_close"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ibutton"
        android:text="test"/>

    <TextView
        android:id="@+id/test_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header"
        android:padding="16dp"
        android:text="@string/lorem_ipsum_large"
        android:textSize="18sp" />

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_fab_label="Menu label"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 1"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 2"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="@string/lorem_ipsum"
            fab:fab_size="mini" />

    </com.github.clans.fab.FloatingActionMenu>

</RelativeLayout>

Then, the buttons are not overlayed but the other element yes. I looked in the sources but I didn't find anything related to this issue.

Does someone have an idea?

leijdekkers commented 9 years ago

I have the same issue. Actually a lot of functionality of the Floating Action Menu is not working if you wrap it in a layout such as "android.support.design.widget.CoordinatorLayout" and "com.flipboard.bottomsheet.BottomSheetLayout".

Not sure if this library has been tested with more complex layouts which are now very common with the Material Design out there....

Clans commented 9 years ago

That is because of stateListAnimator that was added to the default Button style in Lollipop. Try setting android:elevation=2dp on FloatingActionMenu.