skip to Main Content

I have been trying to display the icon images on my bottom navigation bar. No matter what I try I still can’t get it. I have been trying so many different ways to solve but to no avail. Could someone please help me on this? Maybe I have missed out on something.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="@color/yellow"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/fragment_layout">
    </FrameLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:menu="@menu/menu">

        </com.google.android.material.bottomnavigation.BottomNavigationView>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>```




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

<item
    android:id="@+id/nav_donate"
    android:icon="@drawable/donate_icon"
    android:title="Donate"/>

<item
    android:id="@+id/nav_status"
    android:icon="@drawable/status_icon"
    android:title="Status"/>

<item
    android:id="@+id/nav_history"
    android:icon="@drawable/history_icon"
    android:title="History"/>

<item
    android:id="@+id/nav_logout"
    android:icon="@drawable/logout_icon"
    android:title="Log Out"/>
    </menu>
    ```

The image link below is how the display is as of now.
[1]: https://i.stack.imgur.com/EH6AQ.png

2

Answers


  1. Your layout height is set to 0dp
    android:layout_height="0dp" where it is matching the constraints it is given. I have not seen your display but I’m guessing the frame layout is hiding your bottomNavView.
    Change it to

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/fragment_layout"
            app:layout_constraintTop_toTopOf="parent">
            app:layout_constraintBottom_toTopOf="@id/bottomNavView">
        </FrameLayout>
    
     <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavView"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_gravity="bottom"
            android:background="@color/white"
            app:layout_constraintBottom_toBottomOf="parent">
            app:menu="@menu/menu"/>
    
    

    EDIT
    With help from @Niaj Mahmud .

    Change the material version in your app level build.gradle files from 1.5.0 to 1.3.0

    Login or Signup to reply.
  2. yes in physical device it’s work properly but in preview it does not show. this issue is for material version 1.5.0 .. try material 1.3.0 version
    live view of bottom navigation in design view is not showing icons and the menu resource

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search