Given I'm using a layout like this:
<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/flexible_space_image_height" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:statusBarScrim="@android:color/transparent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/mainView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_width="70dp" android:layout_height="70dp" android:layout_marginBottom="20dp" app:fabSize="normal" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|center_horizontal" /> </android.support.design.widget.CoordinatorLayout>
Which is pretty much the standard Cheesesquare sample - except the FloatingActionButton, which I would like to move up by about 20dp.
However, this will not work. No matter if I use margin, padding etc - the button will always be centered at the edge of the anchor, like this:
How can I move the FAB up by 20dp as intended?
As previously mentioned, the main reason to use a CoordinatorLayout is to animate the layout of children, done by giving views Behavior s. A Behavior will update the layout of the owning view when some dependent view changes. Some widgets have built-in behavior, such as FloatingActionButton s and AppBarLayout.
Will keep you posted. The child views are overlapping because there is nothing set to prevent the overlap. The basic layout behavior of CoordinatorLayout comes from FrameLayout, which is intended to provide a block of the screen (i.e. a frame) for its child.
It is because Inside a coordinator layout you can not set one view in relation to another. You can only have them in relation to the parent. Try with layout below.
CoordinatorLayout is a general-purpose container that allows for coordinating interactive behaviorsbetween its children. CoordinatorLayout manages interactions between its children, and as such needs to contain all the View s that interact with each other.
I suggest an elegant solution for you:
<android.support.design.widget.FloatingActionButton ... android:translationY="-20dp" ... />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With