英文:
How to Make Android BottomNavigationView Background Transparent?
问题
我一直在尝试使 BottomNavigationView
的背景透明,以便可以透过它看到背景,但是当我尝试以编程方式或通过 XML 设置 0% 透明度的背景颜色或具有相同透明度的可绘制对象时,背景变成了这样:
我希望背景完全透明,而不是像图片中显示的那样。
这是底部导航栏的 XML 代码:
<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"/>
这是整个 XML 文件的代码:
<?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>
英文:
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:
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>
答案1
得分: 4
以下是翻译好的内容:
标题背后的背景叠加是因为底部导航栏的抬升效果。若要移除它,请添加以下属性:
app:elevation="0dp"
android:alpha="0.5"
移除使视图透明的背景颜色。
android:background="#00000000"
你还可以尝试使用:
android:elevation="0dp"
英文:
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"
答案2
得分: 1
你可以尝试:
navigationView.getBackground().setAlpha(122);
在这里,你可以设置不透明度,范围从0(完全透明)到255(完全不透明)。
你还可以使用取值为双精度的 XML 属性 alpha。
范围从0f到1f(包括边界),0f 表示透明,1f 表示不透明:
android:alpha="0.0" 不可见
android:alpha="0.5" 半透明
android:alpha="1.0" 完全可见
英文:
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
答案3
得分: 0
以下是翻译好的内容:
我无法通过以下方式获得所需的解决方案:
app:elevation = "0dp"
或者
android:background = "#0000000"
或者
android:alpha = "0.0"
所有这些解决方案在切换到具有白色以外背景颜色的片段时,导致我的图标也变成了透明。我为我的 BottomNavigationView 创建了一个 background.xml 文件,并将其设置为背景,效果非常好。以下是我的 .xml 代码。
透明背景的 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"/>
英文:
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"/>
答案4
得分: 0
Late answer but will help you for sure
在您的 XML 文件中(按原样在您的代码中使用,稍后可以根据您的需求进行更新)
<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" />
形状文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000"/>
</shape>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论