Je mets à jour mon application avec la nouvelle barre d'outils de la bibliothèque de support v21. Mon problème est que la barre d'outils ne projette aucune ombre si je ne règle pas l'attribut "élévation". Est-ce le comportement normal ou je fais quelque chose de mal?

Mon code est:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="4dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       android:id="@+id/FrameLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       .
       .
       .

Et dans mon activité - méthode OnCreate:

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

J'ai fini par définir ma propre ombre portée pour la barre d'outils, j'ai pensé que cela pourrait être utile pour ceux qui la recherchent:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"
              android:orientation="vertical">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                                       android:layout_width="match_parent"
                                       android:layout_height="wrap_content"
                                       android:background="@color/color_alizarin"
                                       android:titleTextAppearance="@color/White"
                                       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

        <View android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/toolbar_dropshadow"/>

    </FrameLayout>

</LinearLayout>

@ drawable / toolbar_dropshadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">

    <gradient android:startColor="@android:color/transparent"
              android:endColor="#88333333"
              android:angle="90"/>

</shape>

@ couleur / color_alizarine

<color name="color_alizarin">#e74c3c</color>

Google a publié la bibliothèque Design Support il y a quelques semaines et il existe une solution astucieuse à ce problème dans cette bibliothèque.

Ajoutez la bibliothèque Design Support en tant que dépendance dans build.gradle:

compile 'com.android.support:design:22.2.0'

Ajoutez AppBarLayoutfourni par la bibliothèque comme enveloppe autour de votre Toolbarmise en page pour générer une ombre portée.

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
       <android.support.v7.widget.Toolbar
           .../>
    </android.support.design.widget.AppBarLayout>

Voici le résultat:

Il existe de nombreuses autres astuces avec la bibliothèque de support de conception.

1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

AndroidX

Comme ci-dessus mais avec dépendance:

implementation 'com.google.android.material:material:1.0.0'

et com.google.android.material.appbar.AppBarLayout

Vous ne pouvez pas utiliser l'attribut d'élévation avant l'API 21 (Android Lollipop). Vous pouvez cependant ajouter l'ombre par programme, par exemple en utilisant une vue personnalisée placée sous la barre d'outils.

@ layout / toolbar

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

<View
    android:id="@+id/toolbar_shadow"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@drawable/toolbar_dropshadow" />

@ drawable / toolbar_dropshadow

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#88333333"
        android:angle="90"/> </shape>

dans votre plan d'activité <include layout="@layout/toolbar" />

Utilisez les dossiers / values pour appliquer le style d'ombre correct en fonction de la version du système d'exploitation.

Pour les appareils sous 5.0 , utilisez /values/styles.xml pour ajouter windowContentOverlay au corps de votre activité:

<style name="MyViewArea">
    <item name="android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

Ajoutez ensuite votre propre ombre personnalisée en modifiant votre thème pour inclure:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

Vous pouvez récupérer la ressource d'ombre d'application IO de Google ici: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

Pour les appareils 5.0 et plus récents , utilisez /values-v21/styles.xml pour ajouter une élévation à votre barre d'outils à l'aide d'un style d'en-tête personnalisé:

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

Notez que dans le second cas, j'ai dû créer un style MyViewArea vide pour que windowContentOverlay n'apparaisse pas également.

[Mise à jour: modification des noms de ressources et ajout de Google Shadow.]

Cela a très bien fonctionné pour moi:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

Si vous définissez ToolBarcomme, ActionBarappelez simplement:

getSupportActionBar().setElevation(YOUR_ELEVATION);

Remarque: il doit être appelé après setSupportActionBar(toolbar);

J'ai ajouté

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>

dans la description de la barre d'outils et cela fonctionne pour moi. Utilisation de 5.0+

Mon problème est que la barre d'outils ne projette aucune ombre si je ne règle pas l'attribut "élévation". Est-ce le comportement normal ou je fais quelque chose de mal?

C'est le comportement normal. Consultez également la FAQ à la fin de cet article .

J'ai joué avec ça pendant des heures, voici ce qui a fonctionné pour moi.

Supprimez tous les elevationattributs des widgets appBarLayoutet Toolbar(y compris styles.xmlsi vous appliquez un style).

Maintenant, dans l'activité, appliquez le elvationsur votre actionBar:

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

Cela devrait fonctionner.

Vous pouvez également le faire fonctionner avec RelativeLayout. Cela réduit un peu l'imbrication de la disposition;)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_shadow" />
</RelativeLayout>

Tout ce dont vous avez besoin est un android:margin_bottomégal à la android:elevationvaleur. Non AppBarLayout, clipToPaddingetc. requis.

Exemple:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginBottom="4dp"
    android:background="@android:color/white"
    android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Inner layout goes here-->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

Pour 5.0 +: vous pouvez utiliser AppBarLayout avec Toolbar. AppBarLayout a l'attribution "élévation".

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:elevation="4dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/toolbar" />
    </android.support.design.widget.AppBarLayout>

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>

name = "displayOptions"> useLogo | showHome | showTitle | showCustom

ajouter à Basetheme

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

La plupart des solutions fonctionnent bien ici. Voudrais montrer une autre alternative similaire:

gradle:

implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Votre mise en page peut avoir une vue de la barre d'outils, et une ombre pour elle, ci-dessous, similaire à celle-ci (besoin de modification bien sûr):

<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="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>

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

</LinearLayout>

res / drawable-v21 / toolbar_action_bar_shadow.xml

<androidx.appcompat.widget.AppCompatImageView
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:src="@drawable/msl__action_bar_shadow"/>

res / drawable / toolbar_action_bar_shadow.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>

res / drawable / msl__action_bar_shadow.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#33000000" />

            <size android:height="10dp" />
        </shape>
    </item>

</layer-list>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar as Toolbar)
    }
}

Exemple complet ici , comme j'ai remarqué que l'EDI a un bogue indiquant que l' foregroundattribut est trop nouveau pour être utilisé ici.

J'ai eu un problème similaire avec l'ombre. L'ombre est dessinée par le parent direct d'AppBarLayout dans mon cas. Si la hauteur du parent est la même que celle de AppBarLayout, l'ombre ne peut pas être dessinée. Donc, vérifier la taille de la mise en page parent et peut-être la refaire de la mise en page peut résoudre le problème. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

La bonne réponse sera d'ajouter
android: backgroundTint = "# ff00ff" à la barre d'outils avec android: background = "@ android: color / white"

Si vous utilisez une autre couleur que le blanc pour l'arrière-plan, cela supprimera l'ombre. Nice one Google!