Android：图层列表浮动操作按钮-暂停和恢复应用后，按钮阴影看起来有所不同

Question

Apologies in advance if this question has already been asked somewhere on this site. I just wasn't sure how to word it in the search bar. I tried though.

So basically, I know Android Studio will allow you to create a floating action button without the extra effort now but I'm just seeing if I can make one without it. I've done it with some help I got from another question here but for some reason, when I start the app, the Floating Action Button's shadow looks like this:

But when I exit and return before it is removed from memory (either exiting and returning a few seconds later or pausing the app and resuming), the shadow turns into this:

This is my circle.xml file:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>

    </layer-list>
</item>

<item >
    <shape android:shape="oval">
        <solid android:color="#FFBB00" />
    </shape>
</item>


</layer-list>

And this is how my activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.myname.testapp.MainActivity">


    <ImageButton
        android:layout_margin="15dp"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/circle"
        android:id="@+id/fab_button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

   <ListView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/ResultsListView"
       android:layout_alignParentTop="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true" />

</RelativeLayout>

Any idea what is going on? I'm still relatively new to Android App development so sorry if this happens to be a minor error. I'm still not sure what is going on. Any bit of help will be greatly appreciated. Thank you very much.

Answer 1

change your circle.xml to this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape android:shape="oval">
            <solid android:color="#FFBB00" />
        </shape>
    </item>
</layer-list>

and add this line

android:elevation="5dp"

to image button.

more info Defining Shadows and Clipping Views