comment obtenir Android gradient Center effet de lumière?
Je veux quelque chose comme l'image suivante
Je l'ai essayé en utilisant la forme drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="360"
android:centerX="50%"
android:centerY="50%"
android:gradientRadius="50%"
android:endColor="#000000"
android:centerColor="#FFFFFF"
android:startColor="#000000" >
</gradient>
</shape>
5 réponses
Créez un nouveau fichier xml Android (disons GreyRadial.xml) dans votre dossier drawable
Dans votre fichier xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:centerColor="#c1c1c1"
android:endColor="#4f4f4f"
android:gradientRadius="400"
android:startColor="#c1c1c1"
android:type="radial" >
</gradient>
</shape>
Utilisez ce xml dans votre arrière-plan de mise en page en utilisant
android:background="@drawable/GreyRadial"
L'effet peut être approximé dans une liste de calques en utilisant plusieurs formes rectangulaires. Utilisez un rectangle plein avec la couleur d'arrière-plan centrale. Ensuite, utilisez deux dégradés avec les mêmes couleurs de début et de fin. Rendre la couleur centrale la même aussi, sauf définir l'alpha à zéro.
Dans le code ci-dessous, les couleurs sont les suivantes:
@color/background_dark = #ffb8860b
@color/background_light = #ffd2b48c
@color/transparent = #00b8860b
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="@color/background_light"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/background_dark"
android:centerColor="@color/transparent"
android:endColor="@color/background_dark"
android:angle="45"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/background_dark"
android:centerColor="@color/transparent"
android:endColor="@color/background_dark"
android:angle="135"/>
</shape>
</item>
</layer-list>
Une fois de plus solution:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerX="50%"
android:centerY="50%"
android:endColor="@android:color/black"
android:gradientRadius="100%"
android:startColor="@android:color/transparent"
android:type="radial"/>
</shape>
Voici ma solution au problème.
<shape android:shape="rectangle">
<gradient
android:endColor="@color/your_dark_color"
android:startColor="@color/your_light_color"
android:type="radial"
android:gradientRadius="700"/>
En changeant la valeur de android:gradientRadius j'ai pu obtenir les résultats exacts pour moi.
Si le rapport d'aspect de l'ovale dont vous avez besoin est fixe, vous pouvez utiliser le dégradé dessiné comme arrière-plan et utiliser scaleX ou scaleY pour l'étirer en ovale.
Drawable myradial.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--Radial gradient centered at middle of top with glow color-->
<gradient
android:startColor="FF336699"
android:endColor="00000000"
android:centerX="50%"
android:centerY="50%"
android:gradientRadius="50%"
android:type="radial"/>
</shape>
Voir l'utiliser comme arrière-plan
<View
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@drawable/myradial"
android:scaleX="0.5"
/>
Si le rapport d'aspect n'est pas fixé, il est toujours possible de définir scaleX dans le code lors de l'exécution.
Cela ne fonctionnera pas pour tout le monde dans toutes les situations. Il peut faire des mises en page difficiles. Une bonne chose est que c'est un rendu unique pass, par rapport aux 3 passes de la solution très élégante affichée avec 2 gradients linéaires sur un solide. Il peut également être utilisé pour étirer tout en dégradé, par exemple pour créer un dégradé linéaire à 22,5 degrés.