web-dev-qa-db-fra.com

Comment ajouter une ombre au FAB fourni avec la bibliothèque de conception de support Android?

Le titre est assez explicite.

Le code suivant ne rend pas l'ombre sous le bouton d'action flottante. Que peut-on faire pour rendre l'ombre? Cette fonctionnalité n'est-elle vraiment pas prise en charge même sur API 21+?

<Android.support.design.widget.FloatingActionButton
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content"
    Android:src="@drawable/ic_add"
    Android:clickable="true" />

Remarque: L'ajout de Android:elevation n'ajoute pas d'ombre à l'API 21.

Example screenshot

Capture d'écran tirée de l'exemple de dandar3: https://github.com/dandar3/Android-support-design

androidfloating-action-buttonandroid-design-libraryappcompat-v7-r22.2
52
Rolf ツ

Il suffit de définir app:borderWidth="0dp" pour résoudre ces problèmes pour moi.

Remarque: n'oubliez pas d'ajouter xmlns:app="http://schemas.Android.com/apk/res-auto" à votre mise en page racine.

Ce problème devrait être corrigé dans la prochaine version de la bibliothèque de conceptions Android. 

92
Dmytro Danylyk

Pour API 21+, vous devez définir app:borderWidth="0dp" et app:elevation="[number]dp". En définissant l’altitude, vous donnez la taille d’ombre souhaitée:

Example of values for parameter "elevation"

Voici un exemple de code pour API 21+:

<Android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/locate_user_FAB"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    Android:layout_above="@+id/take_taxi_FAB"
    app:backgroundTint="@color/colorAccentGrey">

Une chose importante à retenir pour les API inférieures à 21 (Android 4), c’est pour les conditions de compatibilité que FAB mettra une marge autour du bouton pour dessiner l’ombre. Ensuite, vous devriez faire quelque chose comme ça (j'utilise actuellement ce code et ça marche):

<Android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/locate_user_FAB"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    Android:layout_above="@+id/take_taxi_FAB"
    Android:layout_alignParentRight="true"
    Android:layout_marginRight="@dimen/map_FAB_marginRight"
    Android:layout_marginBottom="@dimen/locate_user_FAB_marginBottom"
    app:backgroundTint="@color/colorAccentGrey">

Je préfère mettre xmlns:app="http://schemas.Android.com/apk/res-auto" au début du XML, mais je ne le fais que pour vous le rappeler;]

31
j_gonfer

Si cela ne fonctionne toujours pas pour certains, il y a une différence significative entre:

app:elevation="6dp"
app:borderWidth="0dp"

et

app:borderWidth="0dp"
app:elevation="6dp"

L'ordre semble avoir de l'importance pour une raison quelconque (le premier ordre fonctionne, le second ne fonctionne pas) et cela provient de la bibliothèque de support 23.3.0

5
user4941227

J'éprouvais le même problème et je l'ai obtenu en supprimant cette balise de mon AndroidManifest.xml.

Android:hardwareAccelerated="false"

Je l'ai d'abord ajouté, avec Android:largeHeap="true", parce que je pensais en avoir besoin pour une carte thermique dans laquelle un grand nombre de points étaient affichés, mais j'ai ensuite réalisé que cela pouvait fonctionner uniquement avec Android:largeHeap="true".

5
Tragalunas

Vérifier le manifeste dans le projet ou les bibliothèques dans la balise d'application et delete them

Android:hardwareAccelerated="false"
Android:largeHeap="true"

Mais si vous avez besoin de ces options, les ombres et les animations de transformation ne fonctionneront pas.

4
PanCrucian

Au cas où cela aiderait, j'utilisais 

Android:tint="@color/myColor"

au lieu de

Android:backgroundTint="@color/myColor".

Remplacer teinte par backgroundTint a ramené l'ombre.

0
narko