CODEWITHSUNDEEP
androidandroid-layoutfloating-action-button
O.O.
O.O.

Reputation: 2013

Moving Floating Action Button to the Bottom

I have cloned the CheeseSquare sample code by Chris Banes. While, I have the most recent version of the Support Library and Android Studio, I'm running this code on Nexus 4, Android 4.2.2.

This sample code shows the Floating Action Button twice i.e. in the Main Activity (include_list_viewpager.xml) i.e. in the 3 Tabs, as well as in the CheeseDetailActivity (activity_detail.xml)

In the Main Activity (include_list_viewpager.xml) the Floating Action Button is at the bottom and it is described as:

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

On the other hand the Floating Action Button is in the middle in CheeseDetailActivity (activity_detail.xml). It is described as:

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

I would like to move the Floating Action Button in the CheeseDetailActivity (activity_detail.xml) to the bottom as shown in the Main Activity (include_list_viewpager.xml). I tried this by changing the layout_anchorGravity by layout_gravity as shown below:

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

I'm curious why the Floating Action Button moves to the top of the screen with my above mentioned modified code? Is there any way to bring it to the bottom?

Upvotes: 0

Views: 2638

Answers (1)

ianhanniballake
ianhanniballake

Reputation: 200130

app:layout_anchor="@id/appbar" means the FloatingActionButton will be 'anchored' or attached to the app bar. Remove that line if you'd like to decouple their position.

Upvotes: 3

Related Questions