web-dev-qa-db-ja.com

ツールバーを透明にする

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を見ることができるように、さまざまな方法を試しました。しかし、正しい解決策が見つかりませんでした。

助けてください

androidtoolbartransparent
16
Nabeel K

ほとんどの場合、ツールバーの背後にあるコンテンツを表示するために、ツールバーを半透明にする必要があります。問題は、ツールバーの背後にあるコンテンツの色が、ツールバーの要素/テキストの色（たとえば、上/戻る矢印）と衝突する可能性があることです。

そのため、多くの実装で、ツールバーは実際には透明ではなく、グラデーションで半透明であることがわかります。

次のコードでこれを取得できます。

<?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％がうまく機能するということです。

もう1つの方法は、ツールバーのタイトルを非表示にすることです。

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

そして、アフォーダンスをアップします...

getSupportActionBar().setDisplayShowTitleEnabled(false);

レイアウトプレビューパネルにこのようなものが表示されていても心配しないでください... enter image description here

実際にコンテンツが重複している場合は、外観が大きく異なります。

enter image description here

52
Sotti

これが私の解決策です。

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

それを試してください：

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