web-dev-qa-db-de.com

wie bekomme ich einen Android-Gradienten-Center-Lichteffekt?

ich möchte so etwas wie folgendes Bild 

enter image description here

ich habe es mit einer streckbaren Form versucht

<?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

Erstellen Sie eine neue Android-XML-Datei (z. B. GreyRadial.xml) in Ihrem Zeichenordner

In Ihrer XML-Datei

<?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>

Verwenden Sie diese XML in Ihrem Layouthintergrund mit

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

Der Effekt kann in einer Layer-Liste mit mehreren rechteckigen Formen approximiert werden. Verwenden Sie ein ausgefülltes Rechteck mit der mittleren Hintergrundfarbe. Verwenden Sie dann zwei Farbverläufe, wobei die Start- und Endfarben gleich sind. Stellen Sie auch die Mittenfarbe gleich ein, setzen Sie jedoch das Alpha auf Null.

In dem folgenden Code sind die Farben wie folgt:

@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

Noch eine Lösung:

<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

Wenn das Seitenverhältnis des gewünschten Ovals festgelegt ist, können Sie den Verlauf als Hintergrund zeichnen und mit scaleX oder scaleY in ein Oval strecken.

zeichenbare 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>

ansicht als Hintergrund verwenden

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

Wenn das Seitenverhältnis nicht festgelegt ist, kann es dennoch möglich sein, scaleX zur Laufzeit im Code festzulegen.

Dies funktioniert nicht für alle in allen Situationen. Dies kann zu kniffligen Layouts führen. Eine schöne Sache ist, dass es ein einzelner Renderdurchlauf ist, verglichen mit den 3 Durchgängen der sehr eleganten Lösung, die mit 2 linearen Gradienten über einem Volumenkörper angezeigt wird. Es kann auch verwendet werden, um jeden Gradienten auszudehnen, beispielsweise um einen linearen Gradienten in einem Winkel von 22,5 Grad zu erzeugen.

0
leorleor

Hier ist meine Lösung für das Problem.

<shape Android:shape="rectangle">

 <gradient
     Android:endColor="@color/your_dark_color"
     Android:startColor="@color/your_light_color"
     Android:type="radial"
     Android:gradientRadius="700"/>

Durch Ändern des Wertes von Android:gradientRadius konnte ich die genauen Ergebnisse für mich ermitteln.

0
Unaiza Khalid