androidxmlfloating-action-buttonlayer-list

Android layer-list affecting position of floating action button


I am creating an app where a layer-list is used as background and a floating action button is also used. When the layer-list is set as the background of the relative layout, it changes the position of the FAB, but I cannot understand why it happens.

I want the FAB to be positioned at the bottom left. When I don't have the background set as my layer-list, it appears where I have coded.

FAB without background added to relative layout

But when I add the background attribute to the Relative layout, FAB automatically moves in.

FAB when background added to relative layout

I can't understand what is affecting this behavior of FAB.

XML for layer_list:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimary" />
        <padding
            android:bottom="64dp"
            android:left="32dp"
            android:right="32dp"
            android:top="64dp" />
    </shape>
</item>

<item>
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
        <corners
            android:bottomLeftRadius="64dp"
            android:bottomRightRadius="64dp"
            android:topLeftRadius="64dp"
            android:topRightRadius="64dp" />
    </shape>
</item>

XML for Activity:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/home_layer_list">

<TextView
    android:id="@+id/text_view"
    android:layout_centerInParent="true"
    android:textSize="36sp"
    android:textStyle="bold"
    android:textColor="@color/colorPrimary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello world" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:src="@drawable/ic_fab"
    android:layout_margin="16dp"
    app:backgroundTint="#FFFFFF"/>

How can I make the FAB move back to the position where it was initially?


Solution

  • Try to change your layout like below:

    <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">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/home_layer_list">
    
            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="hello world"
                android:textColor="@color/colorPrimary"
                android:textSize="36sp"
                android:textStyle="bold" />
        </RelativeLayout>
    
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:src="@drawable/ic_fab"
            android:layout_margin="16dp"
            app:backgroundTint="#FFFFFF" />
    
    </RelativeLayout>
    

    enter image description here