BottomNavigationView does not show any icons

Question

I'm trying to implement a bottomr navigation bar for my app.
I'm using the BottomNavigationView class (namespace Android.Support.Design.Widget) from the Xamarin.Android.Support.Design library, version 28.0.0.3. I'm targeting API 30.

I was following the explanation from https://devblogs.microsoft.com/xamarin/exploring-androids-bottom-navigation-view/.

However, when I test the app on my Android emulator (Pixel 2, API 30), the bottom navigation bar appears as a blank white bar with no icons on it. Clicking it does nothing. I have tried various things, such as changing the "app:showAsAction" attribute to "always", and using a different size for the icons (they are currently 32x32 at mdpi; there are versions for other dpis as well).
But nothing seems to work. I have not found an answer to a similar problem anywhere else.

These are the files I have:

(Resources/layout/main.xml)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schema.android.com/apk/res/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <FrameLayout android:id="@+id/content"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_above="@+id/navigator"/>
    <android.support.design.widget.BottomNavigationView android:id="@+id/navigator"
                                                        android:layout_width="match_parent"
                                                        android:layout_height="64dp"
                                                        android:layout_gravity="start"
                                                        android:layout_alignParentBottom="true"
                                                        android:background="@android:color/white"
                                                        app:elevation="8dp"
                                                        app:menu="@menu/navigator"/>
</RelativeLayout>

(Resources/menu/navigator.xml)

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/home"
          android:icon="@drawable/home"
          android:title="Home"
          android:enabled="true"
          app:showAsAction="ifRoom"/>
    <item android:id="@+id/library"
          android:icon="@drawable/library"
          android:title="Library"
          android:enabled="true"
          app:showAsAction="ifRoom"/>
    <item android:id="@+id/search"
          android:icon="@drawable/search"
          android:title="Search"
          android:enabled="true"
          app:showAsAction="ifRoom"/>
</menu>

What am I doing wrong?

Answer 1

I got the response, apparently it was a version problem of 'com.google.android.material:material:1.5.0'. I needed to replace 1.5.0 by 1.4.0, I hope that would help someone else.

Bye

Answer 2

Hello @Carnagion ,​

Welcome to our Microsoft Q&A platform!

the bottom navigation bar appears as a blank white bar with no icons on it.

It seems the xml wasn't set to the BottomNavigationView, the app:menu="@menu/navigator" line doesn't work. After testing the code and reproduce the issue, the cause is syntax error of the xmlns:app="http://schema.android.com/apk/res/res-auto" code. The code should be xmlns:app="http://schemas.android.com/apk/res-auto". Please change this line, and it'll works as expected.

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.