使用BottomNavigationView小部件android在底部导航栏中不显示菜单

Question

I am trying to add 5 icons on the bottom of the navigation bar. and this is what it came out like pic1 . When I click on the bottom, other icons would show up only one at a time, shown in pic2 . I need to make it look like the this picture, pic3 . Does anyone have any idea on what's wrong with the code?

These are the libraries that I am using:

   implementation 'com.android.support:support-core-utils:27.1.1'
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'

Here is my bottom navigation layout view:

<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true">

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bottomNavViewBar"
        android:background="@drawable/white_grey_border_top"
        app:menu="@menu/bottom_navigation_menu">

    </android.support.design.widget.BottomNavigationView>

</RelativeLayout>

Here is white_grey_border_top drawable file:

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="1dp">

<item
    android:bottom="-1dp"
    android:top="1dp"
    android:right="-1dp"
    android:left="-1dp">

    <shape
        android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/grey" />
        <solid
            android:color="@color/white" />

    </shape>

</item>

Here is my bottom_navigation_menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">


<item
    android:id="@+id/ic_house"
    android:icon="@drawable/ic_house"
    android:title="">

</item>

<item
    android:id="@+id/ic_search"
    android:icon="@drawable/ic_search"
    android:title="">

</item>

<item
    android:id="@+id/ic_circle"
    android:icon="@drawable/ic_circle"
    android:title="">

</item>

<item
    android:id="@+id/ic_alert"
    android:icon="@drawable/ic_alert"
    android:title="">

</item>

<item
    android:id="@+id/ic_android"
    android:icon="@drawable/ic_android"
    android:title="">

</item>

update: when I add android:backgroundTint="#1091BF" to my bottom navigation layout view, then it works but the background is blue ( pic4 ). Also, I notice that if I just change the android:color="@color/white" in my white_grey_border_top drawable file to any other color then all the icon would show up.

Answer 1

Try using the following inside your bottom navigation layout view.

<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="@drawable/background"
>
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:backgroundTint="#1091BF"
    app:itemIconTint="#fff"
    app:itemTextColor="#fff"
    app:menu="@menu/navigation"/>

    </android.support.constraint.ConstraintLayout>

Make sure to add dependency

implementation 'com.android.support.constraint:constraint-layout:1.1.2'