Android: Appcompat 21 Hinzufügen von Schatten auf der Aktionsleiste

Question

Ich füge die neue Materialdesign-Aktionsleiste aus der neuen appcompat hinzu und verwende das neue Werkzeugleisten-Widget. Ich habe einen benutzerdefinierten Hintergrund auf der Symbolleiste auf XML gesetzt, aber mein Problem ist, dass der Schlagschatten von der Aktionsleiste nicht angezeigt wird. Weißt du wie das geht?

Toolbar Code

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/my_awesome_toolbar" 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:minHeight="?attr/actionBarSize" 
    android:background="@drawable/ab_background_textured" 
    app:theme="@style/MyTheme" 
    app:popupTheme="@style/MyTheme.Popup"/> 

MyTheme Stil

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> 
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item> 
    <item name="android:textColorSecondary">#ffff8800</item> 
</style> 

MyTheme.Popup Stil

<style name="MyTheme.Popup" parent="ThemeOverlay.AppCompat.Dark"> 
    <item name="android:textColor">#ffffff</item> 
</style> 

Update

Wie @Justin Powell vorgeschlagen, dass ich die actionBarStyle zu meinem Thema hinzufügen, aber immer noch gibt es keinen Schlagschatten.

MyTheme Stil (aktualisiert)

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> 
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item> 
    <item name="android:textColorSecondary">#ffff8800</item> 
    <item name="android:actionBarStyle">@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse</item> 
</style> 

Answer 1

Für Pre-5.0-Layouts können Sie den Schatten zurück auf den Inhalt unter der Symbolleiste durch Zugabe von foreground="?android:windowContentOverlay" zu dem FrameLayout Inhalt hinzufügen.

Zum Beispiel:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
> 

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:minHeight="?attr/actionBarSize" 
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> 

<FrameLayout 
    android:id="@+id/fragmentContainer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:foreground="?android:windowContentOverlay" 
    /> 

</LinearLayout> 

Answer 2

Dies ist, wie ich den Schatten anzuzeigen:

<!-- API level 21 and above then the elevation attribute is enough. For some reason it can't be set directly on the include so I wrap it in a FrameLayout --> 
<FrameLayout 
    android:id="@+id/topwrapper" 
    android:background="@color/theme_primary" 
    android:elevation="4dp" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <include layout="@layout/toolbar_actionbar" /> 
</FrameLayout> 

<FrameLayout 
    android:layout_below="@id/topwrapper" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <WebView 
     android:id="@+id/webview" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
    <!-- This topshadow is hidden in code for API level 21 and above --> 
    <include layout="@layout/topshadow" /> 
</FrameLayout> 

Und dann das topShadow Layout sieht wie folgt aus (die 5dp anpassen, um die Schatten gewünschte Höhe zu erhalten):

<View xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="5dp" 
    android:id="@+id/shadow_prelollipop" 
    android:background="@drawable/background_shadow" /> 

background_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <gradient 
     android:startColor="#02444444" 
     android:endColor="#33111111" 
     android:angle="90"></gradient> 
</shape> 

toolbar_actionbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:myapp="http://schemas.android.com/apk/res-auto" 
    myapp:theme="@style/ActionBarThemeOverlay" 
    myapp:popupTheme="@style/ActionBarPopupThemeOverlay" 
    android:id="@+id/toolbar_actionbar" 
    android:background="@color/theme_primary" 
    myapp:titleTextAppearance="@style/ActionBar.TitleText" 
    myapp:contentInsetStart="?actionBarInsetStart" 
    android:layout_width="match_parent" 
    android:layout_height="?actionBarSize" /> 

Answer 3

fand ich die Lösung in der App Google IO akzeptabel für mich zu sein, sah aber voll kein Blog oder Stackoverflow Post es zu erklären. Was Sie tun können, ist ihre Apache 2 lizenzierte Schublade Schatten Asset aus https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png packen und dann in das Layout Ihrer Aktivität:

<RelativeLayout android:layout_width="match_parent" 
       android:layout_height="match_parent"> 
    <include android:id="@+id/toolbar" 
      layout="@layout/toolbar"/> 

    <FrameLayout android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_below="@id/toolbar" 
       android:foreground="@drawable/header_shadow"> 
    <!-- YOUR STUFF HERE --> 
    </FrameLayout> 
</RelativeLayout> 

Während Kopf Schatten ist

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <item name="header_shadow" type="drawable">@drawable/bottom_shadow</item> 
</resources> 

für API-Ebenen < 21. Genau wie https://github.com/google/iosched/blob/master/android/src/main/res/values/refs.xml und https://github.com/google/iosched/blob/master/android/src/main/res/values-v21/refs.xml.

und aufwendig zu sein, hier ist toolbar.xml

<?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" 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:elevation="4dp" 
     app:theme="@style/ToolbarTheme" 
     app:popupTheme="@style/AppTheme"/> 

Answer 4

actionbar_background.xml

<item> 
     <shape> 
      <solid android:color="@color/black" /> 
      <corners android:radius="2dp" /> 
      <gradient 
       android:startColor="@color/black" 
       android:centerColor="@color/black" 
       android:endColor="@color/white" 
       android:angle="270" /> 
     </shape> 
    </item> 

    <item android:bottom="3dp" > 
     <shape> 

      <solid android:color="#ffffff" /> 
      <corners android:radius="1dp" /> 
     </shape> 
    </item> 
</layer-list> 

add Hintergrund actionbar_style

<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid"> 
    <item name="background">@drawable/actionbar_background</item> 
    <item name="android:elevation">0dp</item> 
    <item name="android:windowContentOverlay">@null</item> 
    <item name="android:layout_marginBottom">5dp</item> 
    <item name="logo">@drawable/ab_logo</item> 
    <item name="displayOptions">useLogo|showHome|showTitle|showCustom</item> 
</style> 

zu Basetheme hinzufügen

<style name="BaseTheme" parent="Theme.AppCompat.Light"> 
      <item name="android:homeAsUpIndicator">@drawable/home_back</item> 
      <item name="actionBarStyle">@style/TFKBTheme.ActionBar</item> 
    </style>