Poison_Frog
Poison_Frog

Reputation: 175

Make a Bottom Navigation Views background transparent

so I've added a bottom navigation view in my app but there,s a problem. I want my bottom navigation view's background to be transparent(it is currently black) i.e i want it to show the part of the background of the Relative layout (that contains the btmnav )that its covering .I've read somewhere that it does that by default and all i need to do is give the relative layout a background and it'll work...but when i do that, the background of the bottom navigation view remains black.

menu resource file:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/live"
    android:icon="@drawable/ic_live_tv_black_24dp"
    android:title="Live"/>

<item
    android:id="@+id/squad"
    android:icon="@drawable/ic_team_squad_black_24dp"
    android:title="Squad"/>

<item
    android:id="@+id/schedule"
    android:icon="@drawable/ic_schedule_black_24dp"
    android:title="Schedule"/>
<item
    android:id="@+id/feed"
    android:icon="@drawable/ic_rss_feed_black_24dp"
    android:title="Feed"/>

 </menu>

code in layout file

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout 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=".MainActivity"


    >



     <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/btmnav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemTextColor="#fff3CD70"
    app:itemIconTint="#fff3CD70"


    app:menu="@menu/bottom_navigation" />



    </RelativeLayout>

Before adding the background

After adding the background

What i want

Upvotes: 2

Views: 7315

Answers (3)

Zain
Zain

Reputation: 40830

Step 1: Create a drawable file with a transparent Rectangle

res\drawable\transparent_rect.xml

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

Step 2: Set the background of the BottomNavigationView to this drawable using android:background

android:background="@drawable/transparent_rect"

Upvotes: 3

Kasım &#214;zdemir
Kasım &#214;zdemir

Reputation: 5634

I'm using this line:

BottomNavigationView navView = findViewById(R.id.nav_view);
navView.setBackgroundColor(ContextCompat.getColor(getApplicationContext(), android.R.color.transparent));

This is my project

Upvotes: 4

user2199860
user2199860

Reputation: 818

Set the background of 'btmnav' to a color that has a transparent alpha channel.

Add to your BottonNavigationView android:background="#00ffffff"

You can also set a theme and set it there:

android:theme="@style/NavigationTheme"

Styles.xml

<style name="NavigationTheme" parent="AppTheme">
    <item name="itemIconTint">@android:color/white</item>
    <item name="itemTextColor">@android:color/white</item>
    <item name="android:background">#00ffffff</item>
</style>

Upvotes: 2

Related Questions