comment définir l'ombre à une vue dans android?

Question

Je veux savoir comment ajouter une couche d'ombre à n'importe quelle vue générale dans android. pour exemple: supposons que j'ai un xml de mise en page, montrant quelque chose comme ça ..

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    <Button.... 
    ... 
</LinearLayout> 

Maintenant, quand il apparaît que je veux avoir une ombre autour d'elle.

Answer 1

Il existe une astuce simple, utilisant deux vues formant l'ombre.

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:padding="10dp" 
    android:background="#CC55CC"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 
     <TableLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:stretchColumns="0"> 
      <TableRow> 
       <LinearLayout 
        android:id="@+id/content" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"> 
        <TextView 
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" 
         android:background="#FFFFFF" 
         android:text="@string/hello" /> 
       </LinearLayout> 
       <View 
        android:layout_width="5dp" 
        android:layout_height="fill_parent" 
        android:layout_marginTop="5dp" 
        android:background="#55000000"/> 
      </TableRow> 
     </TableLayout> 
     <View 
      android:layout_width="fill_parent" 
      android:layout_height="5dp" 
      android:layout_marginLeft="5dp" 
      android:background="#55000000"/> 
    </LinearLayout> 
</FrameLayout> 

Espérons cette aide.

Answer 2

La meilleure façon de créer une ombre est d'utiliser une image 9patch comme arrière-plan de la vue (ou un ViewGroup qui entoure la vue).

La première étape consiste à créer une image png entourée d'une ombre. I utilisé photoshop pour créer une telle image. C'est vraiment simple.

• Créez une nouvelle image avec Photoshop.
• Ajoutez un calque et créez un carré noir de 4x4.
• Créez une ombre sur le calque en sélectionnant le calque dans l'explorateur de calques et en cliquant sur un bouton intitulé fx et en choisissant l'ombre portée.
• Exportez l'image en tant que png.

L'étape suivante consiste à créer des tirages 9 pièces à partir de cette image.

• Ouvert draw9patch de android-sdk/tools
• Ouvrez l'image dans draw9patch
• Créer 4 lignes noires sur les quatre côtés du carré comme la suivante, puis enregistrez l'image sous shadow.9.png.

Maintenant, vous pouvez ajouter cette ombre comme arrière-plan des vues que vous voulez ajouter à l'ombre . Ajouter shadow.9.png à res/drawables. Maintenant, ajoutez en arrière-plan:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/shadow" 
    android:paddingBottom="5px" 
    android:paddingLeft="6px" 
    android:paddingRight="5px" 
    android:paddingTop="5px" 
> 

j'ai écrit récemment un blog post qui explique en détail et comprend l'image 9patch que j'utilise pour créer l'ombre.

Answer 3

Voilà ma version ringard de la solution ... Ceci est la modification de la solution trouvée here

Je n'aimais pas la façon dont les coins ont l'air si je fanée tous ...

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<!--Layer 0--> 
<!--Layer 1--> 
<!--Layer 2--> 
<!--Layer 3--> 
<!--Layer 4 (content background)--> 

<!-- dropshadow --> 
<item> 
    <shape> 
     <gradient 
      android:startColor="@color/white" 
      android:endColor="@color/white" 
      android:centerColor="#10CCCCCC" 
      android:angle="180"/> 
     <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" /> 
    </shape> 
</item> 

<item> 
    <shape> 
     <gradient 
      android:startColor="@color/white" 
      android:endColor="@color/white" 
      android:centerColor="#20CCCCCC" 
      android:angle="180"/> 
     <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" /> 
    </shape> 
</item> 

<item> 
    <shape> 
     <gradient 
      android:startColor="@color/white" 
      android:endColor="@color/white" 
      android:centerColor="#30CCCCCC" 
      android:angle="180"/> 

     <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" /> 
    </shape> 
</item> 

<item> 
    <shape> 
     <gradient 
      android:startColor="@color/white" 
      android:endColor="@color/white" 
      android:centerColor="#40CCCCCC" 
      android:angle="180"/> 
     <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" /> 
    </shape> 
</item> 

<item> 
    <shape> 
     <gradient 
      android:startColor="@color/white" 
      android:endColor="@color/white" 
      android:centerColor="#50CCCCCC" 
      android:angle="180"/> 
     <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" /> 
    </shape> 
</item> 

<!-- content background --> 
<item> 
    <shape> 
     <solid android:color="@color/PostIt_yellow" /> 
    </shape> 
</item> 

Answer 4

en supposant u utiliseriez une disposition linéaire (j'ai considéré comme une disposition linéaire verticale) .. et avoir une vue juste en dessous layout.Now linéaire pour ce point de vue de fournir une couleur de départ et la couleur fin .. I aussi voulait obtenir cette chose, son travail pour moi ..Si vous avez besoin d'un effet encore meilleur, il suffit de contourner la couleur de début et de fin.

activity_main

<?xml version="1.0" encoding="utf-8"?> 

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

    <LinearLayout 
     android:id="@+id/vertical" 
     android:layout_width="match_parent" 
     android:layout_height="150dp" 
     android:background="@drawable/layout_back_bgn" 
     android:orientation="vertical" > 
    </LinearLayout> 

    <View 
     android:layout_below="@+id/vertical" 
     android:layout_width="match_parent" 
     android:layout_height="10dp" 
     android:background="@drawable/shadow" 
     > 
    </View> 


</LinearLayout> 

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?> 

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

<solid android:color="#FF4500" /> 

</shape> 

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="#4D4D4D" 
     android:endColor="#E6E6E6" 
     android:angle="270" 
     > 
    </gradient> 
</shape> 

J'ai essayé de poster une image que je l'ai après avoir utilisé le code ci-dessus, mais stackoverflow ne me permet pas car je n'ai pas la réputation .. Désolé à ce sujet.

Answer 5

</LinearLayout> 
      <View 
       android:layout_width="match_parent" 
       android:layout_height="2dp" 
       android:background="@color/dropShadow" /> 

Utilisez juste en dessous du LinearLayout

Une autre méthode

créer "rounded_corner_bg.xml" dans/dossier drawable

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

<item> 
    <shape android:shape="rectangle"> 
     <solid android:color="@color/primaryColor" /> 

     <corners android:radius="4dp" /> 
    </shape> 
</item> 

<item 
    android:bottom="2dp" 
    android:left="0dp" 
    android:right="0dp" 
    android:top="0dp"> 
    <shape android:shape="rectangle"> 
     <solid android:color="#F7F7F7" /> 

     <corners android:radius="4dp" /> 
    </shape> 
</item> 

</layer-list> 

Pour utiliser cette mise en pageandroid:background="@drawable/rounded_corner_bg"

Answer 6

Vous pouvez utiliser l'altitude, disponible depuis le niveau de l'API 21

L'altitude d'une vue, représentée par la propriété Z, détermine la visuelle Apparence de son ombre: les vues avec des valeurs Z plus élevées produisent des ombres plus grandes et plus douces. Les vues avec des valeurs Z plus élevées occluent les vues avec les valeurs Z les plus basses; cependant, la valeur Z d'une vue n'affecte pas la taille de la vue . Pour régler l'altitude d'une vue:

dans une définition de mise en page, utilisez l'attribut

android:elevation 

. Pour régler l'altitude d'une vue dans le code d'une activité, utilisez la méthode

View.setElevation() 

.

Source