Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

BottomNavigationView is not full width

I am working on an Android app and implementing BottomNavigationView from the design library. I have looked at many examples and I can't figure out what is wrong with my layout. The BottomNavigationView is not displayed as full width.

Another issue is the status bar color is not getting applied.

enter image description here

activity_main.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" android:layout_width="match_parent" android:layout_height="match_parent">  <!-- Include the toolbar --> <include layout="@layout/toolbar"/>  <RelativeLayout android:id="@+id/fragment_container"             xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="match_parent"             android:layout_height="match_parent"/>   <android.support.design.widget.BottomNavigationView     android:id="@+id/bottom_navigation"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_alignParentBottom="true"     android:layout_gravity="bottom"     app:itemBackground="@color/colorPrimary"     app:itemIconTint="@android:color/white"     app:itemTextColor="@android:color/white"     app:menu="@menu/bottom_navigation_main"/>  </android.support.design.widget.CoordinatorLayout> 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.AppBarLayout 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="wrap_content" android:theme="@style/AppTheme.AppBarOverlay">  <android.support.v7.widget.Toolbar     android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?attr/actionBarSize"     android:background="?attr/colorPrimary"     app:popupTheme="@style/AppTheme.PopupOverlay"/>  </android.support.design.widget.AppBarLayout> 

Edit: Added solution for Status Color not being set

android:fitsSystemWindows="true"

(colorPrimaryDark) status bar color not working on android v21?

like image 370
midhunhk Avatar asked Jan 02 '17 20:01

midhunhk


1 Answers

The BottomNavigationView is not displayed as full width.

It is not supposed to.

According to design guidelines the width of an action can vary between 80dp and 168dp. The two actions you have defined are not sufficient to fill the whole area horizontally.
(As a side note, also according to guidelines the view should contain between three and five actions.)

If you want to fill the space behind the BottomNavigationView, you can set the background color of the view to be the same color as the items background:

<android.support.design.widget.BottomNavigationView      android:background="@color/bottom_view_color"      app:itemBackground="@color/bottom_view_color"       // .... /> 
like image 188
Andy Res Avatar answered Oct 03 '22 02:10

Andy Res