J'ai cherché autour de moi et je n'ai pas trouvé de moyen approprié de le faire. Je souhaite avoir les effets d'ombre suivants sur mes vues:
Pour être honnête, je ne sais pas si ce second se fait en appliquant un effet d'ombre. Des idées?
J'ai cherché autour de moi et je n'ai pas trouvé de moyen approprié de le faire. Je souhaite avoir les effets d'ombre suivants sur mes vues:
Pour être honnête, je ne sais pas si ce second se fait en appliquant un effet d'ombre. Des idées?
Réponses:
Je sais que cette question a déjà reçu une réponse, mais je veux que vous sachiez que j'ai trouvé un drawable
sur Android Studio
qui est très similaire aux photos que vous avez dans la question: Jetez un œil à ceci:
android:background="@drawable/abc_menu_dropdown_panel_holo_light"
Cela ressemble à ceci:
J'espère que ce sera utile
Éditer
L'option ci-dessus concerne les anciennes versions de Android Studio
, vous ne pourrez donc pas la trouver. Pour les versions plus récentes:
android:background="@android:drawable/dialog_holo_light_frame"
De plus, si vous souhaitez avoir votre propre forme personnalisée, je vous suggère d'utiliser un logiciel de dessin comme Photoshop
et de le dessiner.
Ne pas oublier de l'enregistrer comme .9.png
fichier (exemple: my_background.9.png
)
Lire la documentation: Draw 9-patch
Modifier 2
Une solution encore meilleure et moins efficace consiste à utiliser un CardView
ensemble et app:cardPreventCornerOverlap="false"
pour empêcher les vues de chevaucher les bordures:
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:contentPadding="0dp">
<!-- your layout stuff here -->
</android.support.v7.widget.CardView>
Assurez-vous également d'avoir inclus la dernière version dans le build.gradle
,
compile 'com.android.support:cardview-v7:26.0.0'
/<sdk-path>/extras/android/support
.
cardView
J'utilise Android Studio 0.8.6 et je n'ai pas trouvé:
android:background="@drawable/abc_menu_dropdown_panel_holo_light"
donc j'ai trouvé ceci à la place:
android:background="@android:drawable/dialog_holo_light_frame"
et cela ressemble à ceci:
mettre un arrière-plan de @android:drawable/dialog_holo_light_frame
, donne une ombre mais vous ne pouvez pas changer la couleur d'arrière-plan ni le style de la bordure, il est donc préférable de profiter de l'ombre de celui-ci, tout en étant capable de mettre un arrière-plan via la liste des calques
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="0dp"
android:drawable="@android:drawable/dialog_holo_light_frame"
android:left="0dp"
android:right="0dp"
android:top="0dp">
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<!--whatever you want in the background, here i preferred solid white -->
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
enregistrez-le dans le dossier dessinable sous dire shadow.xml
pour l'assigner à une vue, dans le fichier de mise en page xml définissez l'arrière-plan de celui-ci
android:background="@drawable/shadow"
Créez card_background.xml dans le dossier res / drawable avec le code suivant:
<?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="#BDBDBD"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
Ajoutez ensuite le code suivant à l'élément auquel vous voulez la mise en page de la carte
android:background="@drawable/card_background"
la ligne suivante définit la couleur de l'ombre de la carte
<solid android:color="#BDBDBD"/>
CardView vous donne une véritable ombre dans Android 5+ et dispose d'une bibliothèque de support. Enveloppez simplement votre vue et vous avez terminé.
<android.support.v7.widget.CardView>
<MyLayout>
</android.support.v7.widget.CardView>
Il nécessite la prochaine dépendance.
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
}
CardView
a que des niveaux d'ombre variables pour différentes élévations en mode compat.
Utilisez la propriété d'élévation pour obtenir un effet d'ombre:
<View ...
android:elevation="2dp"/>
Ceci ne doit être utilisé qu'après la v21, consultez ce lien: http://developer.android.com/training/material/shadows-clipping.html
C'est peut-être tard mais pour ceux qui recherchent encore une réponse, j'ai trouvé un projet sur git hub et c'est le seul qui correspond réellement à mes besoins. android-materialhadowninepatch
Ajoutez simplement cette ligne à votre dépendance build.gradle
compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'
à votre santé. bravo pour le créateur! happycodings
Je sais que c'est stupidement hacky,
mais si vous voulez supporter sous v21, voici mes réalisations.
rectangle_with_10dp_radius_white_bg_and_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Shadow layers -->
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_1" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_2" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_3" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_4" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_5" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_6" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_7" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_8" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_9" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_10" />
</shape>
</item>
<!-- Background layer -->
<item>
<shape>
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
view_incoming.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
android:elevation="7dp"
android:gravity="center"
android:minWidth="240dp"
android:minHeight="240dp"
android:orientation="horizontal"
android:padding="16dp"
tools:targetApi="lollipop">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Hello World !" />
</LinearLayout>
Voici le résultat:
Sous v21 (c'est ce que vous avez fait avec xml)
Au-dessus de la v21 (rendu d'élévation réel)
Si vous avez besoin que les ombres soient correctement appliquées, vous devez procéder comme suit.
Considérez cette vue, définie avec un arrière-plan dessinable:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
L'arrière-plan dessinable est défini comme un rectangle aux coins arrondis:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
C'est la façon recommandée d'apposer des ombres, vérifiez ceci https://developer.android.com/training/material/shadows-clipping.html#Shadows
Utilisez la propriété d'élévation pour l'effet d'ombre:
<YourView
...
android:elevation="3dp"/>
Créez un arrière-plan dessinable comme celui-ci pour afficher une ombre arrondie.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#20d5d5d5" />
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#30cbcbcb" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#50bababa" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/gray_100" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Cette question est peut-être ancienne, mais pour quiconque souhaite à l'avenir un moyen simple d'obtenir des effets d'ombre complexes, consultez ma bibliothèque ici https://github.com/BluRe-CN/ComplexView
En utilisant la bibliothèque, vous pouvez modifier les couleurs des ombres, ajuster les bords et bien plus encore. Voici un exemple pour réaliser ce que vous recherchez.
<com.blure.complexview.ComplexView
android:layout_width="400dp"
android:layout_height="600dp"
app:radius="10dp"
app:shadow="true"
app:shadowSpread="2">
<com.blure.complexview.ComplexView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:color="#fdfcfc"
app:radius="10dp" />
</com.blure.complexview.ComplexView>
Pour changer la couleur de l'ombre, utilisez app: shadowColor = "votre code couleur".
utilisez cette forme comme arrière-plan:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/dialog_holo_light_frame"/>
<item>
<shape android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="@color/gray_200" />
</shape>
</item>
</layer-list>