dadykhoff dadykhoff - 1 month ago 16
Android Question

FAB improperly placed temporarily?

I have a FAB anchored to a LinearLayout. It is correctly positioned in the Android Studio preview. When the fragment is first loaded, the FAB is not located in the correct position (the one in the preview from AS). Certain actions after the initial creation of the Fragment then cause the FAB to move to the correct location (focusing an EditText, going to a new Activity and returning, etc.).

Incorrect placement:
Incorrect placement

Correct placement:
enter image description here

Here is my layout XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">

<LinearLayout
android:id="@+id/input_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:id="@+id/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ui.main.MainFragment">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/distance"
android:textStyle="bold"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="60dp"
android:layout_height="40dp"
android:inputType="number" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:id="@+id/meas_unit"
tools:text="ft"/>
<SeekBar
android:id="@+id/distance_seekbar"
android:layout_width="0dp"
android:layout_height="40dp"
android:max="95"
android:progress="25"
android:background="@null"
android:layout_weight="1"/>
</LinearLayout>

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:drawable/divider_horizontal_bright" />

<LinearLayout
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:elevation="6dp"
tools:context=".ui.main.MainFragment">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/putters"
android:textStyle="bold"/>

</LinearLayout>


</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentTop="false"
android:layout_alignParentEnd="false"
android:layout_alignParentBottom="true"
android:gravity="center"
android:layout_alignWithParentIfMissing="false"
android:layout_alignParentRight="false"
android:elevation="6dp">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button3"
android:layout_gravity="center_vertical" />

<Button
android:layout_width="127dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button4" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_person_add_24dp"
app:layout_anchor="@id/top"
app:layout_anchorGravity="bottom|right|end"
android:tint="@android:color/white"/>

</android.support.design.widget.CoordinatorLayout>


I don't recall having this issue in older versions of Android supprt design library, it seems to have surfaced when I updated
com.android.support:design:23.1.1
to
com.android.support:design:24.2.1
.

Answer

I wasn't able to figure out the root cause of why this doesn't work (I still suspect a bug in in the Support Design library), but I resolved this issue by switching the anchored view to @id/bottom and correspondingly changing the gravity to top|right|end.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_person_add_24dp"
    app:layout_anchor="@id/bottom"
    app:layout_anchorGravity="top|right|end"
    android:tint="@android:color/white"/>
Comments