如何使 Android BottomNavigationView 的背景透明?

huangapple go评论76阅读模式
英文:

How to Make Android BottomNavigationView Background Transparent?

问题

我一直在尝试使 BottomNavigationView 的背景透明,以便可以透过它看到背景,但是当我尝试以编程方式或通过 XML 设置 0% 透明度的背景颜色或具有相同透明度的可绘制对象时,背景变成了这样:

底部导航栏透明背景颜色:
如何使 Android BottomNavigationView 的背景透明?

我希望背景完全透明,而不是像图片中显示的那样。

这是底部导航栏的 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:
如何使 Android BottomNavigationView 的背景透明?

I want the background completely transparent not like it is shown in the picture.

Here's the XML for the BottomNavigationView:

&lt;com.google.android.material.bottomnavigation.BottomNavigationView
    android:id=&quot;@+id/bottom_nav&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;?attr/actionBarSize&quot;
    app:layout_scrollFlags=&quot;scroll|enterAlways&quot;
    android:layout_gravity=&quot;bottom&quot;
    app:menu=&quot;@menu/bottom_nav&quot;
    android:background=&quot;#00000000&quot;
    app:itemBackground=&quot;#00000000&quot;
    app:itemIconTint=&quot;@color/hintcolor&quot;
    app:itemTextColor=&quot;@android:color/white&quot;
    app:itemHorizontalTranslationEnabled=&quot;false&quot;/&gt;

Here's the Code for the Whole XML File:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;
    tools:context=&quot;.NavigationDrawerActivity&quot;&gt;

    &lt;com.google.android.material.appbar.AppBarLayout
        android:id=&quot;@+id/appBarLayout&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;wrap_content&quot;
        app:layout_scrollFlags=&quot;scroll|enterAlways&quot;
        android:theme=&quot;@style/AppTheme.AppBarOverlay&quot;&gt;
        &lt;androidx.appcompat.widget.Toolbar
            android:id=&quot;@+id/toolbar&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;?attr/actionBarSize&quot;
            android:background=&quot;?attr/colorPrimary&quot;
            app:titleTextColor=&quot;?attr/text&quot;
            app:layout_anchor=&quot;@+id/appBarLayout&quot;
            app:layout_anchorGravity=&quot;center&quot;
            app:popupTheme=&quot;@style/AppTheme.PopupOverlay&quot; /&gt;
    &lt;/com.google.android.material.appbar.AppBarLayout&gt;
    &lt;include layout=&quot;@layout/content_navigation_drawer&quot;/&gt;
    &lt;com.google.android.material.bottomnavigation.BottomNavigationView
        android:id=&quot;@+id/bottom_nav&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;?attr/actionBarSize&quot;
        app:layout_scrollFlags=&quot;scroll|enterAlways&quot;
        android:layout_gravity=&quot;bottom&quot;
        app:menu=&quot;@menu/bottom_nav&quot;
        android:background=&quot;#00000000&quot;
        app:itemBackground=&quot;#00000000&quot;
        app:itemIconTint=&quot;@color/hintcolor&quot;
        app:itemTextColor=&quot;@android:color/white&quot;
        app:itemHorizontalTranslationEnabled=&quot;false&quot;/&gt;
&lt;/androidx.coordinatorlayout.widget.CoordinatorLayout&gt;

答案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=&quot;0dp&quot;
android:alpha=&quot;0.5&quot;

Remove the background color which makes view transparent.

android:background=&quot;#00000000&quot;

You can also try with

android:elevation=&quot;0dp&quot;

答案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 = &quot;0dp&quot; 

or

android:background = &quot;#0000000&quot;

or

android:alpha = &quot;0.0&quot;

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:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
&lt;solid android:color=&quot;#00000000&quot;/&gt;
&lt;/shape&gt;

activity_layout.xml

&lt;com.google.android.material.bottomnavigation.BottomNavigationView
    android:id=&quot;@+id/bottom_nav&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;wrap_content&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintStart_toStartOf=&quot;parent&quot;
    app:layout_constraintEnd_toEndOf=&quot;parent&quot;
    android:background=&quot;@drawable/transparent_background&quot;
    app:menu=&quot;@menu/bottom_nav_menu&quot;/&gt;

答案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)

&lt;com.google.android.material.bottomnavigation.BottomNavigationView
    android:id=&quot;@+id/bottomNavigationView&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:layout_gravity=&quot;bottom&quot;
    android:layout_margin=&quot;30dp&quot;
    android:background=&quot;@drawable/bg_rounded&quot;
    app:elevation=&quot;4dp&quot;
    app:itemIconSize=&quot;30dp&quot;
    app:itemIconTint=&quot;#353535&quot;
    app:itemTextColor=&quot;#353535&quot;
    app:itemRippleColor=&quot;@android:color/darker_gray&quot;
    app:labelVisibilityMode=&quot;transparent_rect&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:menu=&quot;@menu/menu_bottom&quot; /&gt;

Shape file:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt; &lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
&lt;solid android:color=&quot;#00000000&quot;/&gt;&lt;/shape&gt;

huangapple
  • 本文由 发表于 2020年9月21日 16:23:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/63988606.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定