使工具欄透明

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透明。以便我們可以看到背景圖片。我嘗試過不同的方法。但找不到正確的解決方案。

請help.thanks

Answer 1

試一下：

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

大多數時候我們希望工具欄變得半透明，因爲我們想顯示它背後的內容。問題在於工具欄後面的內容顏色可能與工具欄元素/文本的顏色（例如向上/向後箭頭）相沖突。

因此，您會在很多實現中看到工具欄實際上並不透明，而是帶有漸變的半透明。

你可以用下面的代碼獲得此：

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

這是我的解決方案。

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