comment mettre ombre à une vue dans android?

je veux savoir comment ajouter une couche d'ombre à n'importe quelle vue générale sur android. pour 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 de lui.

25
demandé sur Janusz 2010-12-10 10:11:42

6 réponses

il y a un truc simple, en 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>

Espérons que cette aide.

2
répondu Fede 2011-02-19 17:10:16

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 encapsule la vue).

la première étape est de créer une image png avec une ombre autour. Je utilisé photoshop pour créer une telle image. C'est vraiment simple.

  • créez une nouvelle image avec Photoshop.
  • ajouter une couche et créer un carré noir de 4x4.
  • créer un ombre sur la couche en sélectionnant la couche dans la couche explorer et en cliquant sur un bouton intitulé fx et le choix de l'ombre portée.
  • exporter l'image comme png.

l'étape suivante consiste à créer des tirables à 9 patches à partir de cette image.

  • Ouvrir draw9patch à partir de android-sdk/tools
  • ouvrir l'image dans draw9patch
  • Créer 4 lignes noires sur les quatre côtés de la carré comme le suivre et ensuite enregistrer l'image comme shadow.9.png .

Maintenant vous pouvez ajouter cette ombre comme le fond des vues que vous voulez ajouter une ombre. Ajouter shadow.9.png à res/drawables . Maintenant l'ajouter 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 récemment écrit un blog post qui explique cela en détail et inclut l'image 9patch que j'utilise pour créer l'ombre.

38
répondu Sapan Diwakar 2014-08-13 14:50:18

en supposant que u utilise une disposition linéaire(j'ai considéré une disposition linéaire verticale)..et avoir une vue juste au-dessous de votre disposition linéaire.Maintenant pour cette vue fournissent une couleur de début et la couleur de fin.. Je voulais aussi obtenir ce truc,ça marchait pour moi..Si vous avez besoin d'un effet encore meilleur,alors il suffit de travailler autour de 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>

"151960920 de l'ombre".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 parce que je n'ai pas de réputation..Désolé à ce sujet.

12
répondu DJphy 2014-12-17 18:55:45

vous pouvez utiliser l'élévation, disponible depuis API Niveau 21

l'élévation d'une vue, représentée par la propriété Z, détermine aspect visuel de son ombre: vues avec des valeurs de Z plus élevées des ombres plus grandes et plus douces. Vues avec des valeurs de Z plus élevées occlude vues avec des valeurs de Z plus basses; cependant, la valeur de Z d'une vue n'affecte pas vue de la taille. Pour définir l'élévation d'une vue:

dans une définition de layout, utilisez le  

android:elevation

attribut. Pour définir la hauteur d'un affichage dans le code d'une activité, utiliser le

View.setElevation()

la méthode.

Source

7
répondu sfresko 2017-04-20 08:10:28

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

Je n'ai pas aimé l'aspect des coins donc je les ai tous fané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
répondu Johnny Wu 2013-10-22 22:40:03

enter image description here

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

utiliser juste en dessous de la ligne D'affichage

Autre Méthode

enter image description here

créer "rounded_corner_bg.xml" /drawable dossier

<?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 disposition android:background="@drawable/rounded_corner_bg"

0
répondu katwal-Dipak 2015-09-08 07:45:15