clicking and holding on button on bottomNavigationView creates a weird "shadow" around it and shows a black box

Question

I've created a bottomNavigationView with floating action button and the items on bottom navigation bar act... weird after clicking them or holding them:

what should I change/disable to get rid of that "shadow" around the button after it's being clicked and that gray box (that appears after holding on the button)?

code:

  <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/bottomNavBar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_final">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="2dp"
            android:clickable="true"
            android:focusable="true"
            android:foregroundGravity="clip_horizontal"
            android:theme="@style/fab"
            app:srcCompat="@drawable/ic_add" />
    </com.google.android.material.bottomnavigation.BottomNavigationView>

styles:

    <style name="fab" parent="Widget.Design.FloatingActionButton">
        <item name="android:backgroundTint">@color/white</item>
        <item name="tint">@color/black</item>
    </style>

    <style name="bottomNavBar" parent="Widget.Design.BottomNavigationView">
        <item name="android:background">@color/ground</item>
    </style>

Please add what you have in style file for BottomNavigationView and FloatingActionButton — Abhilash Maurya, Apr 06 '21 at 12:50
For the people that got similar problem: setting up "colorControlHighlight" and "colorControlActivated" to "@android:color/transparent" removes that shadow, but I haven't figured out how to remove the " gray box" yet — icecube, Apr 07 '21 at 20:27

score 0 · Answer 1 · answered Apr 06 '21 at 12:35

0

Try to set app:itemRippleColor="@null" or app:itemRippleColor="#0000" (transparent)

On Your bottom nav view

answered Apr 06 '21 at 12:35

Narek Hayrapetyan

1,731
15
27

unfortunately, any of them didn't fix the problem – icecube Apr 06 '21 at 16:28

score 0 · Accepted Answer · answered Apr 07 '21 at 20:54

I finally fixed it (It might not be the best solution but... it works)

to remove the shadow you just need to set the colorControlHighlight and colorControlActivated to "@android:color/transparent" to the bottomNavigationBar

to remove that box that appears after holding the button to the Activity add:

        bottomNavigationView.children.forEach {
            (it as? ViewGroup)?.children?.forEach {
                it.setOnLongClickListener { _ -> true }
            }
        }

source

clicking and holding on button on bottomNavigationView creates a weird "shadow" around it and shows a black box

2 Answers2