CoordinatorLayout add padding between elements - android

I want to have two FloatingActionButtons in my CoordinatorView. But when I try to add margin to the top FloatingActionButton, It applies from end of the view - It should add space between FloatingActionButtons.
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
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.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top" />
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>

SOLUTION 1:
Add another View to make a gap between two FAB's. Set the anchor of View to top position of the wordpackAddButton and set the anchor of importWordpack to top-right position of the View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
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">
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<View
android:id="#+id/gap"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top">
</View>
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/gap"
app:layout_anchorGravity="top|center" />
</android.support.design.widget.CoordinatorLayout>
SOLUTION 2:
Wrap two FAB into a LinearLayout and anchor this layout to the bottom-right position of ListView.
Here is an workaround:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:background="#android:color/transparent"
android:clipToPadding="false">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
</LinearLayout>
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.design.widget.CoordinatorLayout>
OUTPUT:

Add this view after Fab button and change top level fab's
layout_anchor to transparent_view.
<View
android:layout_width="8dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top"
app:useCompatPadding="false"
android:layout_gravity="end"
android:background="#android:color/transparent"
android:id="#+id/transparent_view"
android:layout_height="8dp"/>
Hope it helps.

I have faced a similar problem while implementing a FAB Menu.
You can solve this problem by wrapping the second FAB in a FrameLayout like so:
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchorGravity="bottom|right|end" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="56dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top|right">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton" />
</FrameLayout>
This might be a bit of a hacky solution but it is simple and it works. The padding value of the FrameLayout is set to 56dp since that is the size of the FAB.

Related

How to align fab to the bottom right of screen inside a fragment in a recycler view?

I have "activity_main" in which I'm using a Collapsing Toolbar and a Fragment Container. Inside container I'm adding and replacing multiple fragments one of them is "activity_user_shops_list" which is a recycler view. I want to align fab to the bottom right of the screen inside this list fragment. I can't find a way to align it. Any help is appreciated.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:orientation="vertical"
android:gravity="center_horizontal"
android:background="#F3F3F3">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/id_appbar_layout_m"
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/id_collapsing_toolbar_m"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleCollapseMode="scale"
app:title="#string/user_name"
app:expandedTitleGravity="center_horizontal"
app:expandedTitleMarginTop="160dp"
android:background="#F3F3F3">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher"
app:shapeAppearanceOverlay="#style/circleImageView"
android:layout_gravity="center"/>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/id_appbar_layout_m"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/id_fragment_container_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
fragment_user_shops_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/null_gray">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/add_a_shop"
android:src="#drawable/ic_plus"
app:tint="#color/white"
app:maxImageSize="30dp"
app:useCompatPadding="true"/>
</RelativeLayout>
Edit:
After adding android:layout_alignParentRight="true" and
android:layout_alignParentBottom="true" and making all fab parents match_parent, It still not working.
No mater what I do result is same. Here is the result (Gray area is "fragment_user_shops_list"):
You need to set android:layout_alignParentRight and android:layout_alignParentBottom to your FloatingActionButton to align to bottom right corner
Here's what updated xml file should look like:
<RelativeLayout 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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:contentDescription="Shop"
android:src="#android:drawable/btn_plus"
app:maxImageSize="30dp"
app:tint="#android:color/white"
app:useCompatPadding="true" />
</RelativeLayout>

Arrange views in Coordinator Layout

I have problem making my Frame layout be below Bottom Navigation Drawer (yes I put it on the top :)). Right now the top of Frame layout is hidden by BND because it is aligned with parents top just like BND instead of being aligned with BNDs bottom.
Here is the code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordID">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation"
/>
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_settings"
app:layout_insetEdge="bottom" />
</android.support.design.widget.CoordinatorLayout>
You should try to wrap them in RelativeLayout something like this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordID">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation" />
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/BND_ID"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="end|bottom"
app:layout_anchor="#+id/relativeLayout"
app:layout_anchorGravity="right|bottom"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_settings" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout is just a super-powered FrameLayout as described in the docs.
That's why the views are overlapping. Unless you want to use any of the behavior that this view group offers I would suggest you to change to a different layout setup such as
<RelativeLayout
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.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation" />
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/BND_ID">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="end|bottom"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_settings" />
</RelativeLayout>
or make use of one of the coordinatorLayout behaviors
eg.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordID">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
//Add the line below
app:layout_scrollFlags="scroll|enterAlways"
app:menu="#menu/m_navigation"/>
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//Add the line below
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_settings"
app:layout_insetEdge="bottom" />
</android.support.design.widget.CoordinatorLayout>
so when whatever you put inside the frameLayout scroll your bottom nav will hide.

AHBottomNavigation always on front of FloatingActionButton

I'm trying to create a layout with an FAB on top of the bottom navigation menu, but the menu always stays above the button. :(
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"
android:id="#+id/container"
tools:context="com.example.mytest.money.MainActivity">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="110dp"
android:padding="15dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test" />
</android.support.v7.widget.CardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
android:foreground="#color/colorBackground">
</ScrollView>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:selectedBackgroundVisible="false"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_white_24dp"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
What I expect:
Expectation
What I got:
Reality
What can I do to change this? :D
I guess the problem is, AHBottomNavigation has higher elevation than FloatingActionButton that's why its showing above the FloatingActionButton.
FloatingActionButton has default 6dp elevation and the default elevation of AHBottomNavigation is 8dp(From AHBottomNavigation source)
Try setting more higher elevation to FloatingActionButton:
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_white_24dp"
app:fabSize="normal"
app:elevation="12dp"
app:borderWidth="0dp" />
#. You can also use android.support.design.widget.BottomNavigationView instead of AHBottomNavigation.
Below is an Orthographic view of app structure:
See documentation.
Hope this will help~
Try this code :
<?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"
android:id="#+id/container">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="110dp"
android:padding="15dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test" />
</android.support.v7.widget.CardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
android:foreground="#color/white">
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:background="#color/green"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
android:id="#+id/bottomnav"
app:menu="#menu/main">
</android.support.design.widget.BottomNavigationView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_black_24dp"
app:fabSize="normal"
app:elevation="12dp"
app:borderWidth="0dp" />
</android.support.design.widget.CoordinatorLayout>
You can replace this bottom navigation bar with your own.

FloatingActionButton appearing under screen when using TabLayout and ViewPager

Take a look at the FAB below:
It's not appearing unless I collapse the Toolbar. Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_alignParentStart="true"
android:layout_below="#+id/toolbar"
android:layout_marginTop="0dp"
android:animateLayoutChanges="true"
android:background="#android:color/white"
android:layoutDirection="locale"
android:orientation="vertical"
android:padding="0dp">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/accent"
android:src="#drawable/ic_add"
app:layout_anchor="#id/list"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Why is this happening if I set no behavior for the FAB? Is there any property I should add to anything so I could prevent this behaviour?
Simply remove your FloatingActionButton from each Fragment and add it to your Activity. This way not only the FAB stays in place but it also fixes your problem. Then you can use getActivity().findViewByIf(id) in your Fragment and set an onClickListener in each Fragment.
I suggest you remove your RelativeLayout and restructure your layout like this:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/accent"
android:src="#drawable/ic_add"
app:layout_anchor="#id/list"
app:layout_anchorGravity="bottom|end" />
<com.rey.material.widget.ProgressView
android:id="#+id/progress_bar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:pv_autostart="true"
app:pv_circular="true"
app:pv_progressMode="indeterminate"
app:pv_progressStyle="#style/Material.Drawable.CircularProgress" />
</android.support.design.widget.CoordinatorLayout>
Coordinator layout does not behave like relative layout, you can not have multiple children without disturbing each other. so just make one child of coordinator layout i.e relative layout and inside it add recyclerView and floatingActionButton
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/accent"
android:src="#drawable/ic_add"
app:layout_anchor="#id/list"
app:layout_anchorGravity="bottom|end" /></RelativeLayout>

floating action button at bottom right

I'm using this xml, which contains a single ListView and a Floating Action Button. I want the FAB to always be at bottom right(but not too close to borders of screen) but it just fits the list's last item(so when the list has a single item, it's getting at top right)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.reminder.other_activities.AllSimpleRemindersActivity">
<com.baoyz.swipemenulistview.SwipeMenuListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/simpleRems"
android:dividerHeight="0dp"
android:divider="#null"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<RelativeLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:layout_margin="10dp"
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#FF0000"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="#id/test"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
Try setting your SwipeMenuListView height to match_parent and remove your test relative layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.reminder.other_activities.AllSimpleRemindersActivity">
<com.baoyz.swipemenulistview.SwipeMenuListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/simpleRems"
android:dividerHeight="0dp"
android:divider="#null"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<android.support.design.widget.FloatingActionButton
android:layout_margin="10dp"
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#FF0000"
app:borderWidth="0dp"
app:elevation="8dp"
android:layout_gravity="bottom|right"
app:layout_anchor="#id/simpleRems"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Categories

Resources