Search code examples
androidlayoutxamarin.androidbottomnavigationview

Xamarin Android BottomNavigationView adds a blank area to right side


Just started a Xamarin.Android project using an up to date VS 2019. Seemed fine until I added a 4th bottom tab, then suddenly I got a blank space to the right. I would appreciate any help in removing it.

enter image description here

My layout:

<?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"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

  <TextView
     android:id="@+id/message"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerInParent="true"
     android:layout_marginLeft="@dimen/activity_horizontal_margin"
     android:layout_marginStart="@dimen/activity_horizontal_margin"
     android:layout_marginTop="@dimen/activity_vertical_margin"
     android:text="@string/title_search" />

  <android.support.design.widget.BottomNavigationView
     android:id="@+id/navigation"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginEnd="0dp"
     android:layout_marginStart="0dp"
     android:background="?android:attr/windowBackground"
     android:layout_alignParentBottom="true"
     app:menu="@menu/navigation"/>

</RelativeLayout>

Menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@+id/navigation_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="@string/title_search" />

  <item android:id="@+id/navigation_favorite"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="@string/title_favorite" />

  <item android:id="@+id/navigation_recent"
        android:icon="@drawable/ic_recent_black_24dp"
        android:title="@string/title_recent" />

  <item android:id="@+id/navigation_support"
      android:icon="@drawable/ic_support_black_24dp"
      android:title="@string/title_support" />
</menu>

Solution

  • Your BottomNavigationView has a android:layout_width="wrap_content", meaning it will take the minimum amount of horizontal space possible, leaving any additional space empty. If you want it to extend from edge to edge, you need to use android:layout_width="match_parent"