Navigationsleiste halbtransparent über Statusleiste funktioniert nicht

Ich arbeite an einem Android-Projekt und implementiere die Navigationsleiste. Ich lese gerade die neue Material Design Spec und die Material Design Checkliste durch .
Die Spezifikation besagt, dass der ausziehbare Bereich über allem anderen, einschließlich der Statusleiste, schweben und über der Statusleiste halbtransparent sein sollte.

Mein Navigationsbereich befindet sich über der Statusleiste, hat jedoch keine Transparenz. Ich habe den Code aus diesem SO- Beitrag befolgt, wie im Blog-Spot des Google-Entwicklers vorgeschlagen. Link oben Wie verwende ich DrawerLayout, um über die ActionBar / Symbolleiste und unter der Statusleiste anzuzeigen? .

Unten ist mein XML-Layout

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

Unten ist mein Apps-Thema

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

Unten ist mein Apps v21 Thema

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

Unten ist meine onCreate-Methode

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);
    }

Unten ist ein Screenshot meiner Navigationsschublade, der zeigt, dass die Oberseite nicht halbtransparent ist

Der Hintergrund Ihrer Statusleiste ist weiß, der Hintergrund Ihrer Schublade LinearLayout. Warum? Sie sind Einstellungen fitsSystemWindows="true"für Ihre DrawerLayoutund die LinearLayoutdarin. Dies führt LinearLayoutdazu, dass Sie hinter der Statusleiste (die transparent ist) expandieren . So wird der Hintergrund für die Schublade in der Statusleiste weiß.

Wenn Sie nicht möchten, dass sich Ihre Schublade hinter die Statusleiste erstreckt (Sie möchten einen halbtransparenten Hintergrund für die gesamte Statusleiste haben), können Sie zwei Dinge tun:

1) Sie können einfach jeden Hintergrundwert von Ihrem entfernen LinearLayoutund den Hintergrund Ihres Inhalts darin einfärben. Oder

2) Sie können fitsSystemWindows="true"von Ihrem entfernen LinearLayout. Ich denke, dies ist ein logischerer und sauberer Ansatz. Sie vermeiden auch, dass ein Schatten unter die Statusleiste geworfen wird, in der sich Ihre Navigationsleiste nicht erstreckt.

Wenn Sie möchten, dass sich Ihre Schublade hinter die Statusleiste erstreckt und über eine halbtransparente Überlagerung in Statusleistengröße verfügt, können Sie a ScrimInsetFrameLayoutals Container für Ihren Schubladeninhalt ( ListView) verwenden und den Hintergrund der Statusleiste mithilfe von festlegen app:insetForeground="#4000". Natürlich können Sie #4000zu allem wechseln , was Sie wollen. Vergiss nicht fitsSystemWindows="true"hier zu bleiben !

Oder wenn Sie Ihren Inhalt nicht überlagern und nur eine Volltonfarbe anzeigen möchten, können Sie den Hintergrund Ihres Inhalts einfach LinearLayoutauf alles einstellen , was Sie möchten. Vergessen Sie jedoch nicht, den Hintergrund Ihrer Inhalte separat festzulegen!

EDIT: Sie müssen sich nicht mehr darum kümmern. Weitere Informationen zur Implementierung von Navigation Drawer / View finden Sie in der Design Support Library .

Sie müssen lediglich eine halbtransparente Farbe für die Statusleiste verwenden. Fügen Sie Ihrem v21-Thema die folgenden Zeilen hinzu:

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

Vergiss nicht, dass die color (Ressource) immer das Format haben muss #AARRGGBB. Dies bedeutet, dass die Farbe auch den Alpha-Wert enthält.

Warum nicht etwas Ähnliches verwenden?

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

Der obige Code verwendet die Alpha-Ressource in der android:background , um Transparenz in der Aktionsleiste anzuzeigen.

Es gibt andere Möglichkeiten, dies durch Code zu tun, wie andere Antworten zeigen. Meine Antwort oben macht das Notwendige in der XML-Layout-Datei, die meiner Meinung nach leicht zu bearbeiten ist.

Alle hier genannten Antworten sind zu alt und zu lang. Die beste und kurze Lösung, die mit der neuesten Navigationsansicht funktioniert, ist

@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);

    }
}

Dadurch wird die Farbe Ihrer Statusleiste beim Öffnen der Schublade in transparent geändert

Wenn Sie jetzt die Schublade schließen, müssen Sie die Farbe der Statusleiste wieder auf dunkel ändern. So können Sie dies tun.

@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);
    }
}

und dann im Hauptlayout eine einzelne Zeile hinzufügen, dh

            android:fitsSystemWindows="true"

und Ihr Schubladenlayout wird so aussehen

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

und Ihre Navigationsansicht wird so aussehen

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

Ich habe es getestet und es funktioniert voll. Ich hoffe, es hilft jemandem. Dies ist vielleicht nicht der beste Ansatz, aber es funktioniert reibungslos und ist einfach zu implementieren. Markieren Sie es, wenn es hilft. Glückliche Codierung :)

Sie müssen Ihr Navigationsschubladenlayout in a einbinden ScrimLayout.

A ScrimLayoutzeichnet im Grunde ein halbtransparentes Rechteck über das Layout Ihrer Navigationsschublade. Um die Größe des Einschubs abzurufen, überschreiben fitSystemWindowsSie einfach Ihre ScrimLayout.

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

Später überschreiben, onDrawum ein halbtransparentes Rechteck zu zeichnen.

Eine Beispielimplementierung finden Sie in der Google IO App-Quelle. Hier können Sie sehen, wie es in der Layout-XML verwendet wird.

Wenn Sie möchten, befindet sich das Navigationsfeld über der Statusleiste und ist über der Statusleiste halbtransparent. Google I / O Android App Source bietet eine gute Lösung ( APK im Play Store werden nicht auf die letzte Version aktualisiert)

Zuerst benötigen Sie ein 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);
    }
}

Ändern Sie dann in Ihrem XML-Layout diesen Teil

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

Ändern Sie LinearLayout wie folgt in Ihr 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>

Ich hatte eine ähnliche Funktion in meinem Projekt zu implementieren. Und um meine Schublade transparent zu machen, verwende ich einfach die Transparenz für Hex-Farben . Bei Verwendung von 6 Hex-Ziffern haben Sie 2 Hex-Ziffern für jeden Wert von Rot, Grün und Blau. Wenn Sie jedoch zwei zusätzliche Ziffern (8 hexadezimale Ziffern) eingeben, haben Sie ARGB (zwei Ziffern für den Alpha-Wert) (siehe hier ).

Hier sind die Hex-Opazitätswerte: für die 2 zusätzlichen Ziffern

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

Zum Beispiel: Wenn Sie eine hexadezimale Farbe (# 111111) haben, geben Sie einfach einen der Deckkraftwerte ein, um Transparenz zu erhalten. wie folgt: (# 11111100)

Meine Schublade deckt nicht die Aktionsleiste ab (wie Ihre), aber die Transparenz kann auch in diesen Fällen angewendet werden. Hier ist mein Code:

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

Und hier ist ein weiterer Artikel , der Ihnen helfen kann, die Alpha-Codes in hexadezimalen Farben zu verstehen.

Die vorhandenen Lösungen sind ziemlich veraltet. Hier ist die neueste Lösung, die perfekt auf AndroidX- oder Materialbibliotheken funktionieren sollte.

• Fügen Sie android:fitsSystemWindows="true"der Stammansicht Ihres Layouts hinzu, das zufällig DrawerLayout für Ihren Fall ist.

  Dadurch wird die Ansicht angewiesen, den gesamten Bildschirm für Messung und Layout zu verwenden, wobei sich die Statusleiste überschneidet.

• Fügen Sie Ihrem XML-Stil Folgendes hinzu

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>

  windowTranslucentStatusmacht die Statusleiste transparent und
  windowDrawsSystemBarBackgroundsweist die Statusleiste an, etwas darunter zu zeichnen, anstatt eine schwarze Leere zu sein.

• Rufen Sie an DrawerLayout.setStatusBarBackground()oder DrawerLayout.setStatusBarBackgroundColor()in Ihrer Hauptaktivität

  Dadurch wird DrawerLayout angewiesen, den Statusleistenbereich einzufärben.

Oben gute Lösungen, aber sie haben in meinem Fall nicht funktioniert,

Mein Fall: In der Statusleiste ist die gelbe Farbe bereits mit Stilen festgelegt. Sie ist nicht durchscheinend. und meine Navigationsschubladenfarbe ist weiß. Wenn ich jetzt meine Navigationsschublade zeichne, befindet sie sich immer hinter der Statusleiste und der Navigationsleiste, da auch die Farbe der Navigationsleiste festgelegt ist.

Ziel: Ändern der Statusleiste und der Farbe der Navigationsleiste beim Öffnen der Navigationsleiste und Wiederherstellen beim Schließen.

Lösung:

        binding.drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() 
        {
        @Override
        public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
        }

        @Override
        public void onDrawerOpened(@NonNull View drawerView) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.forground));
            getWindow().setNavigationBarColor(getResources().getColor(R.color.forground));
        }

        @Override
        public void onDrawerClosed(@NonNull View drawerView) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.yellow));
            getWindow().setNavigationBarColor(getResources().getColor(R.color.yellow));
        }

        @Override
        public void onDrawerStateChanged(int newState) {
        }
    });

Alle Antworten hier sind sehr kompliziert. Lassen Sie mich Ihnen einfachen Code geben. Fügen Sie unter Ihrem AppTheme-Stil diese Codezeile hinzu, und Sie erhalten eine graue, halbtransparente Statusleiste, wenn Sie die Schublade öffnen.

    <item name="android:windowTranslucentStatus">true</item>

das wird es funktionieren lassen.