4

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>
Nemanja
  • 220
  • 6
  • 13
  • Why are you using a coordinator layout? Coordinator layout does not position views relatively, it uses behaviors for that. Unless you plan to have scrolling behavior you are better off wrapping your views together or using constraint layout – dzsonni Jun 20 '18 at 14:39
  • Well, I will have a snackbar and I need FAB to move up when SB is called. I dont know how to make it happen w/ Relative layout, which was btw the original layout before I change'd it – Nemanja Jun 20 '18 at 15:45
  • just wrap the toolbar and the framelayout in a relative, and leave the fab outside. Give the relativelayout and the fab the respective behaviors from below and you will have a moving fab but a fixed content, I'd advise against moving the actual contant in case of a fab – dzsonni Jun 21 '18 at 06:47
  • @dzsonni ok, what behaviour should I add? I haven worked with CoorLayout before so idk. I need the FAB to be at bottom right. – Nemanja Jun 21 '18 at 14:04
  • app:layout_anchor="@id/fID2" app:layout_anchorGravity="bottom|right|end" add these to the fab – dzsonni Jun 28 '18 at 14:46

2 Answers2

5

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>
Umair
  • 5,756
  • 15
  • 39
  • 47
  • I tried like that but then the FAB doesn't move up when I call snackbar – Nemanja Jun 20 '18 at 15:46
  • @Nemanja I fab is aligned to parent Bottom so it won't move. Either you remove that or I would suggest to keep fab out of relativeLayout. – Umair Jun 20 '18 at 19:48
  • ok, if I put FAB outside, how do I get it to be at bottom right? – Nemanja Jun 21 '18 at 14:05
  • @Nemanja yes. I have updated my answer please take a look at it. – Umair Jun 21 '18 at 14:07
  • 1
    Thank you, moving FAB outside RL and into CoorL solved it. It didnt even needed those `anchor` lines. I was just so tired of trying to fix it, my mind was broken :) Thx again – Nemanja Jun 21 '18 at 21:45
2

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.

Ruan_Lopes
  • 1,243
  • 12
  • 18