title: Android Xamarin Bottom Navigation Bar overwrites the fragment and other view content
body: <p>The library used for Bottom Navigation Bar is this - <a href="https://github.com/pocheshire/BottomNavigationBar" rel="nofollow">https://github.com/pocheshire/BottomNavigationBar</a></p>
  
  <p>I had Navigation Drawer in my application, so I run into issue that Bottom Navigation Bar is above the Navigation Drawer. So I followed the suggestion that was provided in documentation:</p>
  
  <blockquote>
    <p>All you need to do is instead of attaching the BottomBar to your Activity, attach it to the view that has your content. For example, if your fragments are in a ViewGroup that has the id fragmentContainer</p>
  </blockquote>
  
  <p>So I did just that:</p>
  
  <pre><code>    protected override void OnCreate(Bundle bundle)
      {
          // Some stuff
  
          bottomBar = BottomBar.Attach(this.FindViewById&lt;FrameLayout&gt;(Resource.Id.fragmentContainer), bundle);
          bottomBar.SetItems(Resource.Menu.bottombar_menu);
          bottomBar.SetOnMenuTabClickListener(this);
          bottomBar.SetGravity(GravityFlags.Bottom);
  
          var layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
          layoutParams.Gravity = GravityFlags.Bottom;
  
          bottomBar.LayoutParameters = layoutParams;
          bottomBar.NoTopOffset();
  
          // Make a Badge for the first tab, with red background color and a value of "13".
          BottomBarBadge unreadMessages = bottomBar.MakeBadgeForTabAt(0, "#FF0000", 13);
  
          // Control the badge's visibility
          unreadMessages.Show();
          unreadMessages.Hide();
  
          // Change the displayed count for this badge.
          unreadMessages.Count = 4;
  
          // Change the show / hide animation duration.
          unreadMessages.AnimationDuration = 200;
  
          // If you want the badge be shown always after unselecting the tab that contains it.
          unreadMessages.AutoShowAfterUnSelection = true;
  
          var fragment = this.FragmentManager.BeginTransaction();
          fragment.AddToBackStack(null);
          fragment.Add(Resource.Id.fragmentContainer, new CustomFragment());
          fragment.Commit();
      }
  </code></pre>
  
  <p>But unfortunately in result the <a href="http://image.prntscr.com/image/193718d42a7f4e4e951f28960a06ab67.png" rel="nofollow">Bottom Navigation Bar is visible, but the content of Fragment is not</a>.</p>
  
  <p>I checked <a href="http://image.prntscr.com/image/e9eb1441b0bb43d2bf9bd08687737e26.png" rel="nofollow">UI Hierarchy</a>, my fragment content is not even added. </p>
  
  <p>I also tried adding just simple LinearLayout under the view I attached Bottom Navigation Bar, it was also overriden by the Bottom Navigation Bar.</p>
  
  <p>Here is my AXML for main activity view:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:minWidth="25px"
      android:minHeight="25px"
      android:fitsSystemWindows="true"&gt;
      &lt;android.support.v4.widget.DrawerLayout
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:minWidth="25px"
          android:minHeight="25px"
          android:id="@+id/drawer_layout"&gt;
        &lt;RelativeLayout 
              android:layout_width="match_parent"
              android:layout_height="match_parent"&gt;
            &lt;include
                layout="@layout/toolbar"
                android:id="@+id/app_bar"/&gt;
          &lt;ScrollView             
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/app_bar"&gt;
              &lt;FrameLayout
                android:id="@+id/fragmentContainer"
                android:minWidth="25px"
                android:minHeight="25px"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                /&gt;        
          &lt;/ScrollView&gt;
  
          &lt;/RelativeLayout&gt;
          &lt;android.support.design.widget.NavigationView
              android:id="@+id/nav_view"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_gravity="start"
              app:menu="@menu/nav_menu"
              app:headerLayout="@layout/menu_header" /&gt;
      &lt;/android.support.v4.widget.DrawerLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Here are additional resource files used:</p>
  
  <p>bottom_bar.xml</p>
  
  <pre><code>&lt;menu xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item
          android:id="@+id/bottomBarItem_Taken"
          android:icon="@drawable/ic_file_download_white_48dp"
          android:title="" /&gt;
    &lt;item
        android:id="@+id/bottomBarItem_Given"
          android:icon="@drawable/ic_file_upload_white_48dp"
          android:title="" /&gt;
    &lt;item
        android:id="@+id/bottomBarItem_Discover"
          android:icon="@drawable/ic_cached_white_48dp"
          android:title="" /&gt;
  &lt;/menu&gt;
  </code></pre>
  
  <p>nav_menu.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;menu xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    &lt;group android:checkableBehavior="single"&gt;
      &lt;item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" /&gt;
      &lt;item
        android:id="@+id/nav_favorites"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="Favorites" /&gt;
      &lt;item
        android:id="@+id/nav_stuff"
        android:icon="@drawable/ic_business_center_black_24dp"
        android:title="My Stuff" /&gt;
      &lt;item
        android:id="@+id/nav_contacts"
        android:icon="@drawable/ic_contacts_black_24dp"
        android:title="Contacts" /&gt;
        &lt;item
      android:id="@+id/nav_messages"
      android:icon="@drawable/ic_message_black_24dp"
      android:title="Messages" /&gt;
        &lt;item
      android:id="@+id/nav_calendar"
      android:icon="@drawable/ic_date_range_black_24dp"
      android:title="Calendar" /&gt;
        &lt;item
      android:id="@+id/nav_payments"
      android:icon="@drawable/ic_payment_black_24dp"
      android:title="Payments" /&gt;
        &lt;item
      android:id="@+id/nav_history"
      android:icon="@drawable/ic_history_black_24dp"
      android:title="History" /&gt;
    &lt;/group&gt;
    &lt;item&gt;
      &lt;menu&gt;
        &lt;item
          android:id="@+id/nav_settings"
          android:icon="@drawable/ic_settings_black_24dp"
          android:title="Settings" /&gt;
        &lt;item
          android:id="@+id/nav_systemNotifications"
          android:icon="@drawable/ic_android_black_24dp"
          android:title="System Notifications" /&gt;
        &lt;item
          android:id="@+id/nav_support"
          android:icon="@drawable/ic_info_outline_black_24dp"
          android:title="Support" /&gt;
        &lt;item
       android:id="@+id/nav_aboutUs"
       android:icon="@drawable/ic_help_outline_black_24dp"
       android:title="About Us" /&gt;
      &lt;/menu&gt;
    &lt;/item&gt;
  &lt;/menu&gt;
  </code></pre>
  
  <p>menu_header.axml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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="178dp"
      android:orientation="vertical"
      android:weightSum="1"
      android:background="#00BCD4"&gt;
    &lt;FrameLayout         
      android:layout_height="wrap_content"
      android:layout_width="match_parent"        
      android:id="@+id/imageView1"
      android:gravity="center_horizontal"&gt;
  
      &lt;ImageView
          android:layout_height="100dp"
          android:layout_width="100dp"
          android:src="@drawable/profile"
          android:layout_gravity="center_horizontal"
           /&gt;    
    &lt;/FrameLayout&gt;
      &lt;LinearLayout
          android:layout_width="match_parent"
          android:layout_height="54dp"
          android:orientation="vertical"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:id="@+id/linearMenuHeader"
          android:layout_below="@id/imageView1"&gt;
          &lt;TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:textColor="#ffffff"
              android:text="John Johnson"
              android:textSize="20dp"
              android:typeface="sans" /&gt;
          &lt;TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#ffffff"
              android:layout_marginLeft="16dp"
              android:layout_marginTop="2dp"
              android:text="ONLINE"
              android:textSize="14dp"
              android:textStyle="bold" /&gt;
      &lt;/LinearLayout&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>