web-dev-qa-db-fra.com

Android Ombre portée sur la vue

J'ai fait une recherche approfondie d'exemples de code à ce sujet, mais je ne trouve rien.

En particulier, je cherche à ajouter une ombre à un dessin png que j'utilise dans une ImageView. Ce png à dessiner est un rectangle arrondi avec des coins transparents.

Quelqu'un peut-il fournir un exemple de code sur la façon d'ajouter une ombre portée décente à une vue en code ou en XML?

33
coneybeare

Vous pouvez utiliser une combinaison de Bitmap.extractAlpha et d'un BlurMaskFilter pour créer manuellement une ombre portée pour toute image que vous devez afficher, mais cela ne fonctionnera que si votre image n'est chargée/affichée que de temps en temps, car le processus est coûteux.

Pseudo-code (pourrait même compiler!):

BlurMaskFilter blurFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER);
Paint shadowPaint = new Paint();
shadowPaint.setMaskFilter(blurFilter);

int[] offsetXY = new int[2];
Bitmap shadowImage = originalBitmap.extractAlpha(shadowPaint, offsetXY);

/* Might need to convert shadowImage from 8-bit to ARGB here, can't remember. */

Canvas c = new Canvas(shadowImage);
c.drawBitmap(originalBitmap, offsetXY[0], offsetXY[1], null);

Mettez ensuite shadowImage dans votre ImageView. Si cette image ne change jamais mais s'affiche beaucoup, vous pouvez la créer et la mettre en cache dans onCreate pour contourner le traitement d'image coûteux.

Même si cela ne fonctionne pas tel quel, cela devrait suffire à vous faire avancer dans la bonne direction.

32
Josh

Pour l'ombre portée, utilisez le code ci-dessous

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
  <gradient
    Android:startColor="#ffffff"
    Android:centerColor="#d3d7cf"
    Android:endColor="#2e3436"
    Android:angle="90" />
</shape>

Utilisez le dessin ci-dessus pour l'arrière-plan d'une vue

<View 
    Android:id="@+id/divider" 
    Android:background="@drawable/black_white_gradient"
    Android:layout_width="match_parent" 
    Android:layout_height="10sp"
    Android:layout_below="@+id/buildingsList"/>
27
om252345

Cela m'a aidé à faire fonctionner l'ombre, donc je voulais partager le code de travail:

private Bitmap createShadowBitmap(Bitmap originalBitmap) {
    BlurMaskFilter blurFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER);
    Paint shadowPaint = new Paint();
    shadowPaint.setMaskFilter(blurFilter);

    int[] offsetXY = new int[2];
    Bitmap shadowImage = originalBitmap.extractAlpha(shadowPaint, offsetXY);

    /* Need to convert shadowImage from 8-bit to ARGB here. */
    Bitmap shadowImage32 = shadowImage.copy(Bitmap.Config.ARGB_8888, true);
    Canvas c = new Canvas(shadowImage32);
    c.drawBitmap(originalBitmap, -offsetXY[0], -offsetXY[1], null);

    return shadowImage32;
}
10
PeterE

Pour l'API 21 (5.0) + ajoutez Android:elevation="4dp" ou Android:translationZ="4dp" pour afficher la description. Documentation

Elevation Attribute

6
Artyom

Utilisez toujours des ombres transparentes afin qu'elles puissent coller à n'importe quelle couleur.

shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
  <gradient
    Android:startColor="#002e3436"
    Android:endColor="#992e3436"
    Android:angle="90" />
</shape>

Et en vue

<View 
    Android:id="@+id/divider" 
    Android:background="@drawable/shadow"
    Android:layout_width="match_parent" 
    Android:layout_height="5dp"/>
1