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.
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.
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 deandroid-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.
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.
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.
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>
</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
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"