8

Próbuję utworzyć przezroczysty pasek stanu (tak, aby mój widok nawigacji był wyświetlany na pasku stanu), ale nadal chcę dynamicznie zmieniać kolor paska akcji. Z tego powodu kolor paska statusu musi zostać zmieniony na ciemniejszą wersję mojego koloru paska akcji.Translucent StatusBar z dynamicznym kolorem ActionBar w systemie Android

Jeśli ustawię pasek stanu na przezroczysty, jak sugeruje wiele źródeł, mój kolor_podstawowy jest używany jako tło mojego paska stanu. Jednak, ponieważ zmienię kolor paska akcji podczas uruchamiania, primary_dark nie musi być koniecznie ciemnym kolorem mojego paska akcji.

Jeśli ustawię pasek stanu na kolor paska czynności, przezroczystość zniknie. Jeśli ustawię pasek stanu na kolor paska akcji i dodaję przezroczystość, pasek stanu nie wygląda ani źle, ani prawe, a mój nakładający się widok nawigacji nadal nie jest zbyt "przezroczysty"/"kolorowy".

Skrzynka odbiorcza Google ma trzy oddzielne kolory: Skrzynka odbiorcza (niebieska), Odłożona (żółta) i Gotowe (zielona).

Co mogę zrobić, aby osiągnąć to zachowanie?

Odpowiedz

10

W rzeczywistości jest to dość łatwe do wdrożenia.

enter image description here

Pierwszy krok - jest zmiana wysokości Toolbar:

  • zmianę height do wrap_content

więc dla mnie to wygląda tak:

<android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     app:popupTheme="@style/AppTheme.PopupOverlay" /> 

Następnie należy zastąpić środki na v19:

<?xml version="1.0" encoding="utf-8"?> 
    <resources> 
      <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
        <!-- Style properties --> 
        .... 
        <!-- These properties are important:--> 
        <item name="android:windowTranslucentStatus">true</item> 
        <item name="windowActionBarOverlay">false</item> 
        <item name="android:windowActionBarOverlay">false</item> 
        <item name="android:fitsSystemWindows">false</item> 
      </style> 
    </resources> 

Następnie w Activity ustawienie padding dla Toolbar:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
    setSupportActionBar(toolbar); 
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0); 
    ...... 
    ...... 
    public int getStatusBarHeight() { 
     int result = 0; 

     if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) { 
      int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); 
      if (resourceId > 0) { 
       result = getResources().getDimensionPixelSize(resourceId); 
      } 
     } 
     return result; 
    } 

I rzeczywiście, jest to dość dużo. Teraz gdy chcę zmienić kolor paska narzędzi, dzwonię to:

if (getSupportActionBar() != null) { 
     getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.GREEN)); 
    } 

aktywności za układ:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:openDrawer="start"> 

    <include 
     layout="@layout/app_bar_main" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 


    <android.support.design.widget.NavigationView 
     android:id="@+id/nav_view" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:fitsSystemWindows="false" 
     app:headerLayout="@layout/nav_header_main" 
     app:menu="@menu/activity_main_drawer" /> 

</android.support.v4.widget.DrawerLayout> 

UWAGA! W wersjach wcześniejszych niż KitKat pasek stanu pozostał taki sam, nieprzezroczysty.

Przesłałem kod źródłowy aplikacji testowej do mojego dropboxa - feel free to check it out.

Mam nadzieję, że pomoże

+0

Dzięki Konstantin, będę wyglądać po pracy! Jednak: nie wspomniałeś o żadnym kodzie powiązanym z NavigationView. Czy NavigationView znajduje się na pasku stanu w twoim przykładzie? – Frame91

+0

@ Frame91 Moja przyjemność! NavigationView w moim przypadku znajduje się poniżej paska stanu: http://i.stack.imgur.com/B3d9G.png Czy chcesz, aby tak było? –

+0

Zaktualizowałem odpowiedź za pomocą linku do aplikacji testowej (ma ona szufladę nawigacyjną i przyciski do zmiany koloru) –

Powiązane problemy