如何使工具栏透明？

小开

最佳答案

你所需要做的就是定义隐藏动作栏的主题，定义具有透明背景的动作栏样式，并将这个样式设置为工具栏小部件。请注意，工具栏应该绘制为最后一个视图(在所有视图树上)

<style name="Theme.Custom" parent="@android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>


<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>

布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- Toolbar should be above content-->
<include layout="@layout/toolbar" />


</RelativeLayout>

工具栏布局:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/CustomActionBar"/>

小开

我通过创建两个 Theme.AppCompat.Light.NoActionBar主题和将 colorPrimary属性设置为透明颜色来实现半透明工具栏。

1)为不透明的工具栏创建一个主题:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


<!-- Toolbar background color -->
<item name="colorPrimary">#ff212cff</item>


</style>

透明/覆盖工具栏的第二个主题:

<style name="AppTheme.Overlay" parent="AppTheme">
<item name="colorPrimary">@color/transparent</item>
</style>

2)在你的活动布局中，把工具栏放在内容的后面，这样它就可以显示在内容的前面:

<RelativeLayout
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"
android:orientation="vertical">


<fragment
android:id="@+id/container"
android:name="com.test.CustomFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


</RelativeLayout>

3) 将透明主题应用于 AndroidManifest.xml 中的活动

    <activity
android:name="com.test.TransparentActivity"
android:parentActivityName="com.test.HomeActivity"
android:theme="@style/AppTheme.Overlay" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.test.HomeActivity" />
</activity>

小开

工具栏像视图一样工作，所以答案很简单。

toolbar.getBackground().setAlpha(0);

小开

也许你需要看看这篇文章使用 AppCompat-v721的透明操作栏

文章建议的要点是

只需要确保使用 RelativeLayout 放置 Toolbar 和主体。
把工具栏放在最后。
为工具栏的 android: back 属性设置透明颜色

这应该不会引起太多麻烦就能解决问题。

小开

只需使用以下 xml 代码:

布局代码:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/toolbarTransparent"
android:layout_alignParentTop="true" />

并在 Xml中添加以下代码:

<color name="toolbarTransparent">#00FFFFFF</color>

这将为您提供所需的输出。

小开

我知道派对要迟到了，我已经创建了一个简单的类来管理 Toolbar透明度。

import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;






public class TransparentToolbarManager {


private Toolbar mToolbar;
private ColorDrawable colorDrawable;
public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;


public TransparentToolbarManager(Toolbar mToolbar) {
this.mToolbar = mToolbar;
this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
}


public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
this.mToolbar = mToolbar;
this.colorDrawable = colorDrawable;
}


//Fading toolbar
public void manageFadingToolbar(int scrollDistance) {
if (mToolbar != null && colorDrawable != null) {
//FadeinAndOut according to the horizontal scrollValue
if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
setToolbarAlpha(scrollDistance);
} else if (scrollDistance > MAX_ALPHA) {
setToolbarAlpha(MAX_ALPHA);
}
}
}




@SuppressLint("NewApi")
public void setToolbarAlpha(int i) {
colorDrawable.setAlpha(i);
if (CommonHelper.isSupport(16)) {
mToolbar.setBackground(colorDrawable);
} else {
mToolbar.setBackgroundDrawable(colorDrawable);
}
}




}

以及 CommonHelper.isSupport ()

public static boolean isSupport(int apiLevel) {
return Build.VERSION.SDK_INT >= apiLevel;
}

小开

使工具栏透明的最简单方法是在 @ 颜色部分定义不透明度，在 @ style部分定义 TransparentTheme，然后将这些定义放在工具栏中。

@ color. xml

<color name="actionbar_opacity">#33000000</color>

@ styles.xml

<style name="TransparentToolbar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>

@ activity _ main. xml

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@color/actionbar_opacity"
app:theme="@style/TransparentToolbar"
android:layout_height="?attr/actionBarSize"/>

这就是结果:

屏幕截图透明工具栏

小开

在 style.xml 中添加以下行

<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>


<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>

现在在 style-v21中添加以下代码行,

  <style name="AppTheme" parent="Base.Theme.AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

把主题设定为主题 = “@style/AppTheme”

它将使状态栏透明。

小开

通过检查 Google 的源代码示例，我发现了如何使工具栏完全透明。比我想象的要简单。我们只需要创建一个简单的形状绘制像这样。

可绘制内容的名称为 toolbar_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:startColor="@android:color/transparent"
android:endColor="@android:color/transparent"
android:type="linear" />
</shape>

然后在片段或活动中. . 像这样添加工具栏。

    <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/toolbar_bg"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

这里我们将有一个完全透明的工具栏。

不要添加 <android.support.design.widget.AppBarLayout >，如果你这样做，这不会工作。

注意: 如果你需要 AppBarLayout，将高度设置为0，这样它就不会显示阴影。

小开

尝试以下代码

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.Transparent"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

Xml

<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
<item name="colorPrimary">@android:color/transparent</item>
<item name="colorControlActivated">@color/colorWhite</item>
<item name="colorControlNormal">@color/colorWhite</item>
</style>

小开

创建背景为 AppBarLayout 的 Xml 文件是 @ null

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="@+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Login"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>


</android.support.design.widget.AppBarLayout>

结果如下:

小开

只需在应用程序栏布局中添加如下 android:background="@android:color/transparent"即可

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />


</android.support.design.widget.AppBarLayout>`

小开

转到 res包并打开 color.xml。将颜色初级设置为 #00000000。

小开

对于 支持工具栏 v7 android.support.v7.widget.Toolbar:

密码

toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));

Xml (android:background="@null"或 android:background="@android:color/transparent")

<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@null"
android:minHeight="?attr/actionBarSize"
android:theme="@style/Theme.AppCompat.Light.DarkActionBar">


<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:ellipsize="start"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>

如果 Title 不可见，则设置 textColor

小开

只需在 AppBarLayout 标签中添加 android: behind = “ # 10000000”即可

小开

Https://stackoverflow.com/a/37672153/2914140帮助了我。

我为一个活动做了这个布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent" <- Add transparent color in AppBarLayout.
android:theme="@style/AppTheme.AppBarOverlay"
>


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="@style/ToolbarTheme"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:theme="@style/ToolbarTheme"
/>


</android.support.design.widget.AppBarLayout>


<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
<- Remove app:layout_behavior=...
/>


</android.support.design.widget.CoordinatorLayout>

如果这不起作用，在活动的 onCreate()中写(其中工具栏是@+ id/toolbar) :

toolbar.background.alpha = 0

如果您想设置一个半透明的颜色(如 # 30ff00ff) ，然后设置 toolbar.setBackgroundColor(color)。甚至可以设置 AppBarLayout的背景颜色。

在我的案例中，AppBarLayout和 Toolbar的风格并没有发挥作用。

小开

只有这个对我有用(AndroidX 支持库) :

 <com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:theme="@style/AppTheme.AppBarOverlay"
android:translationZ="0.1dp"
app:elevation="0dp">


<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@null"
app:popupTheme="@style/AppTheme.PopupOverlay" />


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

此代码删除所有必要视图中的背景，并从 AppBarLayout 中删除阴影(这是一个问题)

答案就在这里: 移除 AppBarLayout 小部件下面的阴影

小开

将以下代码添加到 styles.xml文件

<style name="LayoutPageTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">@style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">@android:color/transparent</item>
</style>


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent"
app:popupTheme="@style/AppTheme.PopupOverlay" />

别忘了写: android:background="@android:color/transparent"