How to Make Android BottomNavigationView Background Transparent?

Question

I have been trying to make the background of the BottomNavigationView transparent so that the background can be seen through it but when I try to set a background color with 0% alpha or a drawable with the same both programmatically and through xml, the background becomes like this:

BottomNavigationView Background with transparent colors:

I want the background completely transparent not like it is shown in the picture.

Here's the XML for the BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways"
    android:layout_gravity="bottom"
    app:menu="@menu/bottom_nav"
    android:background="#00000000"
    app:itemBackground="#00000000"
    app:itemIconTint="@color/hintcolor"
    app:itemTextColor="@android:color/white"
    app:itemHorizontalTranslationEnabled="false"/>

Here's the Code for the Whole XML File:

<?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"
    tools:context=".NavigationDrawerActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"
        android:theme="@style/AppTheme.AppBarOverlay">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextColor="?attr/text"
            app:layout_anchor="@+id/appBarLayout"
            app:layout_anchorGravity="center"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </com.google.android.material.appbar.AppBarLayout>
    <include layout="@layout/content_navigation_drawer"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav"
        android:background="#00000000"
        app:itemBackground="#00000000"
        app:itemIconTint="@color/hintcolor"
        app:itemTextColor="@android:color/white"
        app:itemHorizontalTranslationEnabled="false"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

That background overlay behind the title is because of elevation of bottom navaigtion bar. To remove it add this attribute.

app:elevation="0dp"
android:alpha="0.5"

Remove the background color which makes view transparent.

android:background="#00000000"

You can also try with

android:elevation="0dp"

Answer 2

you can try:

navigationView.getBackground().setAlpha(122); Here you can set the opacity between 0 (fully transparent) to 255 (completely opaque).

you can also use XML value alpha that takes double values.

The range is from 0f to 1f (inclusive), 0f being transparent and 1f being opaque:

android:alpha="0.0" invisible

android:alpha="0.5" see-through

android:alpha="1.0" full visible

Answer 3

I was unable to get the solution needed using

app:elevation = "0dp" 

or

android:background = "#0000000"

or

android:alpha = "0.0"

All of these solutions caused my icons to become transparent as well when going to a fragment with a background color other than white. I created a background.xml file for my BottomNavigationView and set it as the background and it works great. Below is my.xml code.

Transparent background xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000"/>
</shape>

activity_layout.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@drawable/transparent_background"
    app:menu="@menu/bottom_nav_menu"/>