如何使BottomNavigationView项目背景透明

Posted 2023-04-18

【中文标题】如何使BottomNavigationView项目背景透明

【英文标题】：How to make BottomNavigationView item background transparent

【发布时间】：2021-09-11 17:09:44

【问题描述】：

我想要一个底部导航视图，中间有一个支撑的 FAB。 我将我的 BottomNavigatonView 包裹在一个 BottomAppBar 中。

<?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_
    android:layout_
    tools:context=".ui.home.HomeActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_
        android:layout_>

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:backgroundTint="@color/toolbarAndBottomBarColor"
            app:contentInsetStart="0dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_
                android:layout_
                android:backgroundTint="@android:color/transparent">

                <ImageView
                    android:id="@+id/imageViewDrawerMenu"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="16dp"
                    android:backgroundTint="@android:color/transparent"
                    android:src="@drawable/ic_drawer_menu"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:tint="@color/primaryYellow" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/textViewTitle"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="8dp"
                    android:backgroundTint="@android:color/transparent"
                    android:gravity="center"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@id/imageViewDrawerMenu"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="Home" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </com.google.android.material.appbar.MaterialToolbar>

    </com.google.android.material.appbar.AppBarLayout>

    <include
        layout="@layout/content_home"
        android:layout_
        android:layout_
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_marginBottom="?attr/actionBarSize" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_
        android:layout_
        android:layout_gravity="bottom"
        app:backgroundTint="@color/toolbarAndBottomBarColor"
        app:contentInsetEnd="0dp"
        app:contentInsetStart="0dp"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="16dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_
            android:layout_
            android:layout_gravity="bottom"
            app:itemIconSize="32dp"
            app:itemIconTint="@color/primaryYellow"
            app:labelVisibilityMode="unlabeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/navigation_bottom_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAdd"
        android:layout_
        android:layout_
        android:src="@drawable/ic_add"
        app:backgroundTint="@color/toolbarAndBottomBarColor"
        app:layout_anchor="@id/bottomAppBar"
        app:tint="@color/primaryYellow" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

但是，我无法在最终应用中看到底座。

我什至在 Activity 中将 bottomNavigationView 背景设置为 null

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.appedia.birthdays.R
import kotlinx.android.synthetic.main.activity_home.*
import kotlinx.android.synthetic.main.toolbar_home.*

class HomeActivity : AppCompatActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        bottomNavigationView.background = null
    

将BottomNavigationView 的android:background 属性更改为任何其他颜色确实会生效。但是图标周围的区域仍然是黑色的。 如果我更新itemBackground 的值，它会改变。但是我尝试将此属性设置为@android:color/transparent，但它仍然不起作用。

【参考方案1】：

展示 FAB 摇篮：

您需要将backgroundColor to transparent 和elevation to 0dp 添加到BottomNavigationView。

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                ...
                android:background="@android:color/transparent"
                app:elevation="0dp"
                ... />

改变BottomNavigationView的背景颜色：

您需要创建一个具有android:state_checked 的drawable_selector.xml 文件。

确保在选择器文件中使用 android:drawable。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent" android:state_checked="true" />
    <item android:drawable="@color/colorAccentDark" />
</selector>

将该drawable与app:itemBackground或BottomNavigationView一起使用

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            ...
            app:itemBackground="@drawable/drawable_selector"
            ... />

【讨论】：

这并没有解决FAB cradle不可见的原始问题

@PratikBanodkar 请检查更新后的答案。