Material-components-android: [BottomNavigationView] Weird background using Material 1.1.0 and Navigation component

[l3vick]

I am using some BottomNavigationViews with transparent background in my app and It was working really well but I had to add budgets to my BNV so I added com.google.android.material:material:1.1.0 stable version

Now my BNV has some weird shadow/background behind and it looks really bad and it's happening everywhere.

This is on emulator but on a real device is even worst. It has trapeze form.

I am using:

minSdkVersion 26

targetSdkVersion 29

navigation_version 2.2.0

material_version 1.1.0

And my BNV is:

``` android:id="@+id/topNavigationView"
style="@style/SearchBottomMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#00000000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/autoTv"
app:menu="@menu/search_nav_menu" />

This is the style:

<style name="SearchBottomMenu">
    <item name="itemIconTint">@drawable/nav_item_color_state_dark</item>
    <item name="itemTextColor">@drawable/nav_item_color_state_dark</item>
    <item name="android:paddingTop">@dimen/padding_nano</item>
</style>

and this is the menu

android:id="@+id/trendingSearchFragment"
android:icon="@drawable/ic_trending"
android:title="Tendencias" />
android:id="@+id/mySearchesFragment"
android:icon="@drawable/ic_my_preferences"
android:title="Favoritos" />
android:id="@+id/favoriteSearchFragment"
android:icon="@drawable/ic_my_search"
android:title="Mis busquedas" />

```

if I remove android material 1.1.0 and not excluding material 1.0.0 from navigation component it just looks perfect.

Thanks for any help.

[PiotrPrus]

I encounter exactly the same problem and found another fix for it. Or maybe a bypass. The problem occurs only when I am using transparency hex code, for example, color: #CC141414.
Erasing CC helps. The color #141414 does not have this weird rectangle/trapezoidal shape.

[l3vick]

Setting elevation to 0 dp also solves the problem

[rosuH]

Well... Yes. I had the same problem. I set android:background=#78ffffff for it. Remove the Alpha channel and it's fine. But setting elevation to 0 dp not help.

[norio-agoop]

Same as here. I'd like to use transparent background color to my BottomNavigationView because I use gradient background color but I just removed alpha for now.

[hunterstich]

Yea, what you're seeing is the shadow behind your transparent BottomNavigationView. If you set app:elevation="0dp" on your BottomNavigationView, you should get what you're looking for.

[norio-agoop]

The point was app:elevation="0dp". Not android:elevation="0dp"

[ericntd]

Dang, this is very weird. I think one is better off implementing their own BottomNavigationView with something like TabLayout

[saurabhthorat]

Another solution that worked for me was using a custom drawable with a transparent rectangle:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00000000" />
</shape>

And setting it to the BottomNavigationView: android:background="@drawable/bg_bottom_nav"