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

Question

Je veux savoir comment ajouter une couche d'ombre à un mode d'affichage général 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 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 cela 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 enveloppe la vue).

La première étape consiste à créer une image .png avec une ombre autour d'elle. je Photoshop utilisé pour créer une telle image. Son très simple.

• Créer une nouvelle image avec Photoshop.
• Ajouter un calque et créer un carré noir de 4x4.
• Créer une ombre sur la couche en sélectionnant la couche en couche Explorer et en cliquant sur un bouton intitulé ombre fx et le choix.
• Exporter l'image au format PNG.

L'étape suivante consiste à créer dessinables 9-patch à partir de cette image.

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

Maintenant, vous pouvez ajouter cette ombre comme l'arrière-plan des vues que vous voulez ajouter l'ombre à. Ajouter à shadow.9.png res/drawables. Maintenant, ajoutez comme 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 message qui explique en détail et comprend l'image 9patch que j'utilise pour créer l'ombre.

Answer 3

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 de fin .. Je voulais aussi faire cette chose, son travail pour me..If vous avez besoin d'un meilleur effet, puis juste travailler autour du début et la couleur 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 permettez-moi stackoverflow doesnot coz je n'avez pas reputation..Sorry à ce sujet.

Answer 4

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

  

L'altitude d'un point de vue, représenté par la propriété de Z, détermine la   aspect visuel de son ombre: des vues avec des valeurs plus élevées Z exprimés   plus grandes, des ombres plus douces. Vues avec des valeurs plus élevées Z bouchent vues avec   la baisse des valeurs de Z; Cependant, la valeur Z d'une vue n'affecte pas la   la taille de vue. Pour régler l'altitude d'une vue:

     

dans une définition de mise en page, utilisez la   

android:elevation

     

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

View.setElevation()

     Procédé

.

Source

Answer 5

Voici ma version ringard de la solution ... Ceci est la modification de la solution trouvée

Je n'ai pas aimé la façon dont les coins ont l'air si je fanées 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 6

</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 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 mise en page android:background="@drawable/rounded_corner_bg"