web-dev-qa-db-fra.com

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

Je veux savoir comment ajouter une couche d'ombre à une vue générale dans Android. pour par exemple: supposons que j'ai une mise en page XML, 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 est affiché, je veux avoir une ombre autour. 

androidviewshadow
25
aqs

Il existe un truc simple, utilisant deux vues qui forment 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>

J'espère que cette aide.

2
Fede

La meilleure façon de créer une ombre consiste à utiliser une image 9patch comme arrière-plan De la vue (ou une ViewGroup qui enveloppe la vue).

La première étape consiste à créer une image png avec une ombre autour. J'ai utilisé Photoshop pour créer une telle image. C'est vraiment simple.

  • Créez une nouvelle image avec Photoshop.
  • Ajouter un calque et créer un carré noir de 4x4.
  • Créez une ombre sur le calque en sélectionnant le calque dans le calque Explorateur puis en cliquant sur un bouton intitulé fx et en choisissant ombre portée.
  • Exportez l'image au format png.

La prochaine étape consiste à créer des dessins de 9 patchs à partir de cette image.

  • Ouvrez draw9patch à partir de Android-sdk/tools
  • Ouvrez l'image dans draw9patch
  • Créez 4 lignes noires sur les quatre côtés du carré, comme ci-dessous, puis enregistrez l’image au format shadow.9.png.

Vous pouvez maintenant ajouter cette ombre en tant qu'arrière-plan des vues auxquelles vous souhaitez ajouter Ajoutez shadow.9.png à res/drawables. Maintenant, ajoutez-leen tant que fond:

<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 récemment écrit un article blog qui explique cela en détail et Inclut l'image 9patch que j'utilise pour créer l'ombre.

38
Sapan Diwakar

En supposant que vous utilisiez une mise en page linéaire (j’ai envisagé une mise en page linéaire verticale) .. et que vous avez une vue juste en dessous de votre mise en page linéaire.Maintenant, pour cette vue, indiquez une couleur de début et une couleur de fin ... son travail pour moi .. Si vous avez besoin d'un effet encore meilleur, alors il suffit de contourner les couleurs 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 possède 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.

12
DJphy

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

L'élévation d'une vue, représentée par la propriété Z, détermine le aspect visuel de son ombre: vues avec des valeurs Z plus élevées ombres plus grandes et plus douces. Les vues avec des valeurs Z supérieures obstruent les vues avec valeurs Z inférieures; Cependant, la valeur Z d'une vue n'affecte pas le la taille de la vue. Pour définir l’altitude d’une vue:

dans une définition de mise en page, utilisez le fichier 

Android:elevation

 attribut. Pour définir l’élévation d’une vue dans le code d’une activité, Utilisez le

View.setElevation()

 méthode.

La source

7
Shlomi Fresko

Voici ma version ringarde de la solution ... C'est la modification de la solution trouvée ici

Je n'ai pas aimé l'apparence des coins et je les ai tous effacés ...

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

4
Johnny Wu

 enter image description here 

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

_ {Utiliser juste en dessous de LinearLayout} _

Une autre méthode

 enter image description here

créez "rounded_corner_bg.xml" dans le 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 dispositionAndroid:background="@drawable/rounded_corner_bg"

0
katwal-Dipak