BottomNavigationView does not show any icons

Carnagion 1 Reputation point
2021-10-12T07:32:48.867+00:00

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?

Developer technologies | .NET | Xamarin
Developer technologies | C#
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Mel 11 Reputation points
    2022-03-09T22:34:53.933+00:00

    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

    2 people found this answer helpful.

  2. JarvanZhang 23,971 Reputation points
    2021-10-13T03:32:36.047+00:00

    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.