使工具栏透明 [英] Make Toolbar transparent

问题描述

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

I need to make the above ToolBar transparent. so that we can see the background Image.I have tried different methods. but couldn't find correct solution.

请帮助.谢谢

推荐答案

在大多数情况下，我们希望工具栏是半透明的，因为我们希望在其后面显示内容.问题在于工具栏后面的内容的颜色可能与工具栏元素/文本的颜色发生冲突(例如，向上/向后箭头).

Most of the times we want the toolbar to be translucent because we want to show content behind it. The problem is that the colors of the content behind the toolbar can collide with the color of the toolbar elements/text (up/back arrow for example).

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

For that reason you'll see in a lot of implementations that the toolbar is actually not transparent but translucent with a gradient.

您可以使用下面的代码获得它:

You can obtain this with the next code:

<?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

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

colors.xml

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

您可以在渐变上使用不同的值，我发现对于白色元素，黑色40％可以正常工作.

You can play with different values on the gradient, what I've found is that for white elements, the black 40% works fine.

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

Another thing that you might want to do is to hide the title of the toolbar.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

并显示出更多的负担...

And show the up affordance...

getSupportActionBar().setDisplayShowTitleEnabled(false);

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

Don't worry if you see something like this in the layout preview panel...

实际上与内容重叠时看起来很不同:

It looks very different when is actually overlapping the content:

这篇关于使工具栏透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！