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透明化。这样我们就可以看到背景Image.I尝试了不同的方法。但找不到正确的解决方案。

请帮助。谢谢

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

试试：

<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" />

Answer 4

这是我如何获取透明的工具栏（在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

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

使工具栏透明

4 个答案: