Arrange views in Coordinator Layout - android

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.

Related

floating action button blocks bottom navigation bar

I want my floating action button to be over the listview and above the navigation bar but i cant seem to make it work. (the include layour is the navigation bar).
This is how it looks right now
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".SessionsList">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_baseline_add_24"
android:contentDescription=""
android:layout_margin="16dp" />
<include layout="#layout/activity_base"/>
</FrameLayout>
</LinearLayout>
This is the navigation bar layout code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".BaseActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:itemBackground="#color/orange"
app:itemIconTint="#drawable/selector"
app:itemTextColor="#drawable/selector"
android:layout_gravity="bottom"
app:menu="#menu/menu_navigation" />
</LinearLayout>
I tried putting it in a frame layout and moving things around but I cant get it to work like I want it to.

Change your main layout like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:id="#+id/baseLayout"
layout="#layout/activity_base"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_above="#+id/baseLayout"
android:layout_alignParentEnd="true"
android:src="#drawable/g1" />
</RelativeLayout>
</FrameLayout>
And also change activity_base layout like this
<LinearLayout 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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:itemBackground="#color/black" />
</LinearLayout>

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>

FrameLayout is overlapping with my BottomAppBar that is embedded inside a CoordinatorLayout

The following is my XML snippet, what the problem I'm facing is, the FrameLayout per se, although it's constraints are setup so that the bottom bound sits above the the tab bar, but it doesn't seem to do that. What's more is when a Fragment is loaded into the FrameLayout is just obscured the entire bottom nav/bottom app bar.
<android.support.constraint.ConstraintLayout
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">
<FrameLayout
android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/main_tab_bar_layout"
android:background="#android:color/holo_green_dark" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_tab_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/settingsicon"
android:backgroundTint="#android:color/holo_orange_dark"
android:tint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar" />
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#android:color/white"
app:fabAlignmentMode="center"
app:fabCradleMargin="9dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="5dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:outlineAmbientShadowColor="#android:color/black"
android:outlineSpotShadowColor="#android:color/black">
<android.support.design.widget.BottomNavigationView
android:background="#android:color/transparent"
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/main_tab_navigation"
android:outlineAmbientShadowColor="#android:color/transparent"
android:outlineSpotShadowColor="#android:color/transparent"
/>
</android.support.design.bottomappbar.BottomAppBar>
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
All that I am trying to achieve is:
A bottom navigation view /tabs at the bottom
With a floating action button that's anchored to the center of it.
Then a FrameLayout where I load my fragments.
Am I doing something completely wrong?

You framelayout was overlapping coordinator layout because you have set it's height to match parent and because of this, it was not following the bottom constraint. Change its height to 0dp it will follow the constraint and adjust height accordingly.
Nextly, your coordinator layout's height was match_parent so it was all over the screen not only at the bottom.
Your second bullet is not clear to me so I can't properly answer your question. Is that is anchored to the center of coordinator layout or center of parent layout?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp" <!-- changed from match parent to 0 dp--->
android:background="#android:color/holo_green_dark"
app:layout_constraintBottom_toTopOf="#+id/main_tab_bar_layout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/main_tab_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" <!-- chnaged from match_parent to wrap_content--->
app:layout_constraintBottom_toBottomOf="parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/holo_orange_dark"
android:src="#drawable/settingsicon"
android:tint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar" />
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:outlineAmbientShadowColor="#android:color/black"
android:outlineSpotShadowColor="#android:color/black"
app:backgroundTint="#android:color/white"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:fabAlignmentMode="center"
app:fabCradleMargin="9dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="5dp">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:outlineAmbientShadowColor="#android:color/transparent"
android:outlineSpotShadowColor="#android:color/transparent"
app:menu="#menu/main_tab_navigation" />
</android.support.design.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
To stop the overlapping, include a layout in the Coordinator layout and you can use other view in that layout, FrameLayout in your case. In coordinator layout you can use the bottom bar.
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/content_main" />
<!-- Bottom bar -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fabAlignmentMode="center"
app:fabAttached="true"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:outlineAmbientShadowColor="#android:color/transparent"
android:outlineSpotShadowColor="#android:color/transparent"
app:menu="#menu/main_tab_navigation" />
</com.google.android.material.bottomappbar.BottomAppBar>
<!-- Floating Action button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tint="#android:color/white"
app:fabSize="normal"
app:layout_anchor="#id/bar"
app:srcCompat="#drawable/ic_add_black_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

what's your Nuget version,i test your codes with all nugets version v28.0.0.1,it works well.Maybe you should try to clean solution and restart or update the nuget.
the effect like below :
Update:
<?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.support.design.widget.FloatingActionButton
android:id="#+id/mainFloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/settingsicon"
app:layout_anchorGravity="center_horizontal"
android:backgroundTint="#android:color/holo_orange_dark"
android:tint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_app_bar"
android:background="#android:color/holo_green_dark" />
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#android:color/white"
app:fabAlignmentMode="center"
app:fabCradleMargin="9dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="5dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:layout_alignParentBottom="true"
android:outlineAmbientShadowColor="#android:color/black"
android:outlineSpotShadowColor="#android:color/black">
<android.support.design.widget.BottomNavigationView
android:background="#android:color/transparent"
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/main_tab_navigation"
android:outlineAmbientShadowColor="#android:color/transparent"
android:outlineSpotShadowColor="#android:color/transparent"
/>
</android.support.design.bottomappbar.BottomAppBar>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
the effect like,the framlayout is above the BottomAppBar

CoordinatorLayout add padding between elements

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.

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>

Categories

Resources