web-dev-qa-db-fra.com

Android: Appcompat 21 comment ajouter des ombres sur la barre d'actions

J'ajoute la nouvelle barre d'actions de conception de matériau de la nouvelle application et j'utilise le nouveau widget de barre d'outils. J'ai défini un arrière-plan personnalisé sur la barre d'outils sous XML, mais mon problème est que l'ombre portée de la barre d'action n'est pas affichée. Sais-tu comment faire cela?

Code de la barre d'outils 

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

Style MyTheme 

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

Style MyTheme.Popup 

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

Mettre à jour

Comme @Justin Powell a suggéré que j'ajoute la actionBarStyle sur mon thème mais il n'y a toujours pas d'ombre portée.

Style MyTheme (Mise à jour) 

<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>
androidandroid-5.0-lollipopandroid-actionbar-compat
20
user3907002

J'ai trouvé la solution dans l'application Google IO acceptable pour moi, mais je n'ai vu aucun blog ni article Stackoverflow l'expliquer en détail. Ce que vous pouvez faire est de récupérer leur actif fictif de tiroir Apache 2 sous https://github.com/google/iosched/blob/master/Android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png puis dans la mise en page de votre activité:

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

Alors que l'ombre de l'en-tête est

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

pour les niveaux d'API <21. Tout comme https://github.com/google/iosched/blob/master/Android/src/main/res/values/refs.xml et https://github.com/google/iosched/ blob/master/Android/src/main/res/values-v21/refs.xml .

Et pour être plus précis, voici 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"/>
34
Fabian Frank

Pour les dispositions antérieures à la version 5.0, vous pouvez rajouter l'ombre au contenu situé sous la barre d'outils en ajoutant foreground="?android:windowContentOverlay" à FrameLayout du contenu.

Par exemple:

<?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>
30
Billy

Voici comment j'affiche l'ombre: 

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

Et puis, la disposition en tête d’ombre ressemble à ceci (ajustez le 5dp pour obtenir la hauteur de l’ombre souhaitée): 

<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" />
12
Christer Nordvik

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>

ajouter à l'arrière-plan 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>

ajouter à Basetheme

  <style name="BaseTheme" parent="Theme.AppCompat.Light">
            <item name="Android:homeAsUpIndicator">@drawable/home_back</item>
            <item name="actionBarStyle">@style/TFKBTheme.ActionBar</item>
    </style>
0
Samet öztoprak