CODEWITHSUNDEEP
javaandroidxmluser-interface
Seyed Shaheen
Seyed Shaheen

Reputation: 35

How to Make Android BottomNavigationView Background Transparent?

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: image

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>

Upvotes: 2

Views: 2355

Answers (4)

Arbaz.in
Arbaz.in

Reputation: 1558

Late answer but will help you for sure

In your XML file ( use as it is in your code later you can update as per your needs)

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_margin="30dp"
    android:background="@drawable/bg_rounded"
    app:elevation="4dp"
    app:itemIconSize="30dp"
    app:itemIconTint="#353535"
    app:itemTextColor="#353535"
    app:itemRippleColor="@android:color/darker_gray"
    app:labelVisibilityMode="transparent_rect"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/menu_bottom" />

Shape file:

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

Upvotes: 0

bthayes1
bthayes1

Reputation: 1

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"/>

Upvotes: 0

Sardor Amanov
Sardor Amanov

Reputation: 21

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

Upvotes: 1

Raj
Raj

Reputation: 1595

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"

Upvotes: 5

Related Questions