使工具栏透明

Question

create_account.xml

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="io.sleeko.board.CreateAccountActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"

        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_create_account" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

我需要使上述ToolBar 透明。这样我们就可以看到背景图像。我尝试了不同的方法。但找不到正确的解决方案。

请帮忙。谢谢

Answer 1

大多数时候我们希望工具栏是半透明的，因为我们想在它后面显示内容。问题是工具栏后面内容的颜色可能会与工具栏元素/文本的颜色（例如向上/向后箭头）发生冲突。

因此，您会在很多实现中看到工具栏实际上不是透明的，而是带有渐变的半透明。

你可以用下面的代码来获得这个：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/background_toolbar_translucent" />

background_toolbar_translucent.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="270"
        android:endColor="@android:color/transparent"
        android:startColor="@color/black_alpha_40"/>
</shape>

colors.xml

<color name="black_alpha_40">#66000000</color>

您可以在渐变上使用不同的值，我发现对于白色元素，黑色 40% 效果很好。

您可能想要做的另一件事是隐藏工具栏的标题。

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

并显示向上的启示......

getSupportActionBar().setDisplayShowTitleEnabled(false);

如果您在布局预览面板中看到类似内容，请不要担心...

实际上重叠内容时看起来非常不同：

Answer 2

这是我的解决方案。

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="#00000000">

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

Answer 3

这就是我如何在 AppBarLayout 中获得没有阴影的透明工具栏的版本。上述解决方案的主要问题是当我使工具栏透明时，阴影仍然投射在它下面。在 Fragment 中制作带有后退 navigationIcon 的透明工具栏：

layout_transparent_toolbar_fragment.xml：

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/general_appbar"
    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"
        android:navigationIcon="@drawable/ic_arrow_back_black_24dp"></android.support.v7.widget.Toolbar>

在TransparentToolbarFragment中：

override fun onCreateView(inflater: LayoutInflater, vg: ViewGroup?, savedInstanceState: Bundle?): View? {
    val layout = inflater.inflate(R.layout.layout_transparent_toolbar_fragment, vg, false)
    val toolbar = layout.findViewById<View>(R.id.toolbar) as Toolbar
    val appBar = layout.findViewById<View>(R.id.general_appbar) as AppBarLayout
    appBar.outlineProvider = null
    val appCompatActivity = (activity as AppCompatActivity)
    appCompatActivity.setSupportActionBar(toolbar)

    val actionBar = appCompatActivity.getSupportActionBar()
    if (actionBar != null) actionBar!!.setDisplayHomeAsUpEnabled(true)
    toolbar.setNavigationOnClickListener { appCompatActivity.finish() }

    return layout
}

其实是行

appBar.outlineProvider = null

完成隐藏工具栏阴影的工作。

Answer 4

试试看：

<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:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

并用结束标记删除它：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

但不要让它完全透明，你可以使用像#93000000这样具有透明度的颜色，所以它会是这样的：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#93000000"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />