0

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.

frodyteen
  • 19
  • 6

1 Answers1

0

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'
Shakib Uz-Zaman
  • 581
  • 6
  • 17
  • Thank you for the help, I was messing around with your code, and realized that when I add `android:backgroundTint="#1091BF"` to my own code, then it shows all the icons, but the background color is blue, and when I change it to `#fff` then it won't work. So what should I do to make the background to be white? I will update a picture to the question. – frodyteen Jul 01 '18 at 05:45
  • try using android:backgroundTint="#ffffff" , Is your icon color white ? – Shakib Uz-Zaman Jul 01 '18 at 11:34
  • I tried `#ffffff`, it didn't work. The icons are image assets, it is holo light theme. – frodyteen Jul 01 '18 at 18:45
  • Try changing the assets colors for a test. I think they are not showing because your bottom navigation drawer color and assets color are similar. – Shakib Uz-Zaman Jul 02 '18 at 03:48