web-dev-qa-db-fra.com

comment obtenir un effet de lumière dégradé Android?

je veux quelque chose comme l'image suivante 

enter image description here

je l'ai essayé en utilisant une forme dessinable

<?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>
androidandroid-drawablexml-drawable
33
Ajeet Khadke

Créez un nouveau fichier XML xml (par exemple, GreyRadial.xml) dans votre dossier pouvant être dessiné.

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 l’arrière-plan de votre mise en page à l’aide de

Android:background="@drawable/GreyRadial"
76
Himanshu Joshi

L'effet peut être approché dans une liste de calques en utilisant plusieurs formes rectangulaires. Utilisez un rectangle plein avec la couleur d'arrière-plan du centre. Ensuite, utilisez deux dégradés avec les mêmes couleurs de début et de fin. Faites que le centre ait la même couleur, sauf que l'alpha est à 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>
14
Steven Walters

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>
8
Vadym

Si le rapport d'aspect de l'ovale dont vous avez besoin est fixe, vous pouvez utiliser le dégradé que vous pouvez dessiner 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 en utilisant comme arrière-plan

   <View
       Android:layout_width="200dp"
       Android:layout_height="100dp"
       Android:background="@drawable/myradial"
       Android:scaleX="0.5"
       />

Si le rapport de format n'est pas fixe, il est toujours possible de définir scaleX dans le code au moment de l'exécution.

Cela ne fonctionnera pas pour tout le monde dans toutes les situations. Cela peut rendre les dispositions difficiles. Une des bonnes choses est qu’il s’agit d’un seul passage de rendu, comparé aux 3 passages de la solution très élégante affichée avec 2 gradients linéaires sur un solide. Il peut également être utilisé pour étendre n'importe quel dégradé, par exemple pour créer un dégradé linéaire à un angle de 22,5 degrés.

0
leorleor

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 modifiant la valeur de Android:gradientRadius, j'ai pu obtenir les résultats exacts pour moi.

0
Unaiza Khalid