web-dev-qa-db-ja.com

ナビゲーションバーがステータスバー上で半透明になっていない

私はAndroidプロジェクトに取り組んでおり、Navigation Drawerを実装しています。新しい Material Design Spec および Material Design Checklist を読んでいます。
この仕様では、スライドアウトペインは、ステータスバーを含む他のすべての上に浮かび、ステータスバーの上に半透明である必要があります。

ナビゲーションパネルはステータスバーの上にありますが、透明度はありません。私はこののコードに従っているので、GOOGLE開発者のブログスポットで提案されている投稿、上記のリンク DrawerLayoutの使用方法ActionBar/Toolbarおよびステータスバーの下に表示するには？ 。

以下は私のXMLレイアウトです

<Android.support.v4.widget.DrawerLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/my_drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">
        <Android.support.v7.widget.Toolbar
            Android:id="@+id/my_awesome_toolbar"
            Android:layout_height="wrap_content"
            Android:layout_width="match_parent"
            Android:minHeight="?attr/actionBarSize"
            Android:background="@color/appPrimaryColour" />
    </LinearLayout>
    <LinearLayout Android:id="@+id/linearLayout"
        Android:layout_width="304dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start"
        Android:fitsSystemWindows="true"
        Android:background="#ffffff">
        <ListView Android:id="@+id/left_drawer"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:choiceMode="singleChoice"></ListView>
    </LinearLayout>
</Android.support.v4.widget.DrawerLayout>

以下は私のアプリのテーマです

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/appPrimaryColour</item>
        <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
        <item name="colorAccent">@color/appPrimaryColour</item>
        <item name="windowActionBar">false</item>
        <item name="windowActionModeOverlay">true</item>

    </style>

以下は私のアプリv21テーマです

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/appPrimaryColour</item>
    <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
    <item name="colorAccent">@color/appPrimaryColour</item>
    <item name="windowActionBar">false</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:statusBarColor">@Android:color/transparent</item>
</style>

以下は私のonCreateメソッドです

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout)findViewById(R.id.my_drawer_layout);
    mDrawerList = (ListView)findViewById(R.id.left_drawer);

    mDrawerLayout.setStatusBarBackgroundColor(
        getResources().getColor(R.color.appPrimaryColourDark));

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop)
    {
        LinearLayout linearLayout = 
            (LinearLayout)findViewById(R.id.linearLayout);
        linearLayout.setElevation(30);
    }

以下は、ナビゲーションドロワーのscreenshotで、上部が半透明ではないことを示しています

Screenshot showing non transparent over the status bar

androidnavigation-drawerandroid-5.0-lollipopmaterial-design
80
Boardy

ステータスバーの背景は白で、引き出しの背景はLinearLayoutです。どうして？ DrawerLayoutとその中のLinearLayoutにfitsSystemWindows="true"を設定しています。これにより、LinearLayoutがbehindステータスバー（透明）を展開します。したがって、ステータスバーの引き出し部分の背景を白にします。

enter image description here
ステータスバーの後ろに引き出しを広げたくない場合（ステータスバー全体の背景を半透明にしたい場合）、次の2つのことができます。

1）LinearLayoutから背景値を削除し、その中のコンテンツの背景に色を付けるだけです。または

2）LinearLayoutからfitsSystemWindows="true"を削除できます。これは、より論理的でクリーンなアプローチだと思います。また、ナビゲーションドロワーが拡張されていないステータスバーの下に影を落とさないようにします。

enter image description here
ドロワーをステータスバーの後ろに拡張し、半透明のステータスバーサイズのオーバーレイを使用する場合は、 ScrimInsetFrameLayout をドロワーコンテンツのコンテナーとして使用できます（ListView） app:insetForeground="#4000"を使用してステータスバーの背景を設定します。もちろん、#4000を好きなものに変更できます。ここにfitsSystemWindows="true"を残すことを忘れないでください！

または、コンテンツをオーバーレイせずに単色のみを表示する場合は、LinearLayoutの背景を任意の値に設定できます。ただし、コンテンツの背景を個別に設定することを忘れないでください！

EDIT：これに対処する必要はなくなりました。より簡単なナビゲーションドロワー/ビューの実装については、 Design Support Library をご覧ください。

97
xip

必要なことは、ステータスバーに半透明の色を使用することだけです。これらの行をv21テーマに追加します。

<item name="Android:windowDrawsSystemBarBackgrounds">true</item>
<item name="Android:statusBarColor">@color/desired_color</item>

color（リソース）は常に#AARRGGBBの形式でなければならないことを忘れないでください。これは、色にアルファ値も含まれることを意味します。

29
mroczis

これに似たものを使用してみませんか？

<Android.support.v4.widget.DrawerLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        >

    <FrameLayout
            Android:id="@+id/content_frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"/>

    <ListView
            Android:id="@+id/left_drawer"
            Android:layout_width="240dp"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            Android:choiceMode="singleChoice"
            Android:divider="@Android:color/transparent"
            Android:dividerHeight="0dp"
            Android:background="#80111111"/>
</Android.support.v4.widget.DrawerLayout>

上記のコードでは、Android:backgroundのalphaリソースを使用して、アクションバー内で透明度を表示できます。

他の答えが示すように、コードを介してこれを行う方法は他にもあります。上記の私の答えは、私の意見では簡単に編集できるxmlレイアウトファイルで必要です。

15
Michele La Ferla

ナビゲーションドロワーレイアウトをScrimLayoutで囲む必要があります。

ScrimLayoutは基本的に、ナビゲーションドロワーレイアウト上に半透明の長方形を描画します。インセットのサイズを取得するには、単にfitSystemWindowsのScrimLayoutをオーバーライドします。

@Override
protected boolean fitSystemWindows(Rect insets) {
    mInsets = new Rect(insets);
    return true;
}

後でonDrawをオーバーライドして、半透明の長方形を描画します。

例 実装は、Google IO Appソースにあります。 ここ レイアウトxmlでの使用方法を確認できます。

8
markus-hi

ここに記載されているすべての回答は古すぎて長すぎます。最新のNavigationviewで動作する最良かつ短いソリューションは

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);

    try {
        //int currentapiVersion = Android.os.Build.VERSION.SDK_INT;
        if (Android.os.Build.VERSION.SDK_INT >= Android.os.Build.VERSION_CODES.Lollipop){
            // Do something for Lollipop and above versions

        Window window = getWindow();

        // clear FLAG_TRANSLUCENT_STATUS flag:
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        // finally change the color to any color with transparency

         window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDarktrans));}

    } catch (Exception e) {

        Crashlytics.logException(e);

    }
}

引き出しを開くと、ステータスバーの色が透明に変わります

引き出しを閉じるときは、ステータスバーの色を再び暗い色に変更する必要があります。この方法で行うことができます。

@Override
public void onDrawerClosed(View drawerView) {
   super.onDrawerClosed(drawerView);
    try {
        if (Android.os.Build.VERSION.SDK_INT >= Android.os.Build.VERSION_CODES.Lollipop) {
            // Do something for Lollipop and above versions

            Window window = getWindow();

            // clear FLAG_TRANSLUCENT_STATUS flag:
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

            // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

            // finally change the color again to dark
            window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
        }
    } catch (Exception e) {
        Crashlytics.logException(e);
    }
}

そして、メインレイアウトで単一の行を追加します

            Android:fitsSystemWindows="true"

引き出しのレイアウトは次のようになります

            <Android.support.v4.widget.DrawerLayout     
            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/drawer_layout"
            Android:fitsSystemWindows="true"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

ナビゲーションビューは次のようになります

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation_view"
        Android:layout_height="match_parent"
        Android:layout_width="wrap_content"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer"
        />

私はそれをテストし、それが完全に機能することを確認しました。役立つ場合はマークアップしてください。幸せなコーディング:)

6
Harry Sharma

ナビゲーションパネルがステータスバーの上にあり、ステータスバーの上に半透明にしたい場合。 Google I/O Android App Source 優れたソリューションを提供します（ PlayストアのAPK は最新バージョンに更新されません）

最初に ScrimInsetFrameLayout が必要です

/*
* Copyright 2014 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.Apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* A layout that draws something in the insets passed to {@link #fitSystemWindows(Rect)}, i.e. the area above UI chrome
* (status and navigation bars, overlay action bars).
*/
public class ScrimInsetsFrameLayout extends FrameLayout {
    private Drawable mInsetForeground;

    private Rect mInsets;
    private Rect mTempRect = new Rect();
    private OnInsetsCallback mOnInsetsCallback;

    public ScrimInsetsFrameLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        final TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ScrimInsetsView, defStyle, 0);
        if (a == null) {
            return;
        }
        mInsetForeground = a.getDrawable(R.styleable.ScrimInsetsView_insetForeground);
        a.recycle();

        setWillNotDraw(true);
    }

    @Override
    protected boolean fitSystemWindows(Rect insets) {
        mInsets = new Rect(insets);
        setWillNotDraw(mInsetForeground == null);
        ViewCompat.postInvalidateOnAnimation(this);
        if (mOnInsetsCallback != null) {
            mOnInsetsCallback.onInsetsChanged(insets);
        }
        return true; // consume insets
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        int width = getWidth();
        int height = getHeight();
        if (mInsets != null && mInsetForeground != null) {
            int sc = canvas.save();
            canvas.translate(getScrollX(), getScrollY());

            // Top
            mTempRect.set(0, 0, width, mInsets.top);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Bottom
            mTempRect.set(0, height - mInsets.bottom, width, height);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Left
            mTempRect.set(0, mInsets.top, mInsets.left, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Right
            mTempRect.set(width - mInsets.right, mInsets.top, width, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            canvas.restoreToCount(sc);
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(this);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(null);
        }
    }

    /**
     * Allows the calling container to specify a callback for custom processing when insets change (i.e. when
     * {@link #fitSystemWindows(Rect)} is called. This is useful for setting padding on UI elements based on
     * UI chrome insets (e.g. a Google Map or a ListView). When using with ListView or GridView, remember to set
     * clipToPadding to false.
     */
    public void setOnInsetsCallback(OnInsetsCallback onInsetsCallback) {
        mOnInsetsCallback = onInsetsCallback;
    }

    public static interface OnInsetsCallback {
        public void onInsetsChanged(Rect insets);
    }
}

次に、XMLレイアウトでこの部分を変更します

<LinearLayout Android:id="@+id/linearLayout"
    Android:layout_width="304dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="left|start"
    Android:fitsSystemWindows="true"
    Android:background="#ffffff">
    <ListView Android:id="@+id/left_drawer"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:choiceMode="singleChoice"></ListView>
</LinearLayout>

LinearLayoutを次のようにScrimInsetFrameLayoutに変更します

<com.boardy.util.ScrimInsetFrameLayout
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/linearLayout"
    Android:layout_width="304dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="left|start"
    Android:fitsSystemWindows="true"
    app:insetForeground="#4000">
    <ListView Android:id="@+id/left_drawer"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:choiceMode="singleChoice"></ListView>
</com.boardy.util.ScrimInsetFrameLayout>
5
skyfishjy

私のプロジェクトに実装する同様の機能がありました。そして、引き出しを透明にするには、 16進数の透明度 を使用します。 6桁の16進数を使用すると、赤、緑、青の各値にそれぞれ2桁の16進数があります。ただし、さらに2桁（8桁の16進数）を追加すると、ARGB（アルファ値の場合は2桁）になります（ Look here ）。

16進数の不透明度の値は次のとおりです。追加の2桁

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

例：16進数の色（＃111111）がある場合は、不透明度の値の1つを入力するだけで透明度が得られます。このような：（＃11111100）

私の引き出しは（あなたのような）アクションバーをカバーしませんが、これらの場合にも透明度を適用できます。これが私のコードです：

     <ListView
          Android:id="@+id/left_drawer"
          Android:layout_width="240dp"
          Android:layout_height="match_parent"
          Android:layout_gravity="start"
          Android:background="#11111100"
          Android:choiceMode="singleChoice"
          Android:divider="@Android:color/transparent"
          Android:dividerHeight="0dp" />
</Android.support.v4.widget.DrawerLayout>

そして、もう1つ 記事 があります。これは、16進数のアルファコードを理解するのに役立ちます。

4
fdsilva