Как получить эффект подсветки центра градиента android?

Мне нужно что-то вроде следующего изображения

enter image description here

Я попробовал его с помощью рисованной формы

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

Ответы

Ответ 1

Сделайте новый файл xml файла Android (скажем GreyRadial.xml) в вашей папке с рисунком

В вашем 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>

Используйте этот xml в своем макете, используя

android:background="@drawable/GreyRadial"

Ответ 2

Эффект может быть аппроксимирован в Layer-List, используя несколько прямоугольных форм. Используйте сплошной прямоугольник с центральным цветом фона. Затем используйте два градиента с начальным и конечным цветами. Сделайте цвет центра таким же, за исключением того, что альфа равна нулю.

В приведенном ниже коде цвета следующие цвета:

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

Ответ 3

Еще одно решение:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<gradient
    android:startColor="@android:color/transparent"
    android:endColor="@android:color/black"
    android:centerX="50%"
    android:centerY="50%"
    android:gradientRadius="100%"
    android:type="radial"/>

Ответ 4

Вот мое решение проблемы.

<shape android:shape="rectangle">

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

Изменив значение android:gradientRadius, я смог получить точные результаты для меня.

Ответ 5

Если соотношение сторон овала, которое вам нужно, фиксировано, то вы можете использовать градиент, который можно извлечь в качестве фона, и использовать scaleX или scaleY, чтобы растянуть его на овал.

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>

просматривать его в качестве фона

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

Если соотношение сторон не фиксировано, по-прежнему возможно установить значение scaleX в коде во время выполнения.

Это не будет работать для всех в любых ситуациях. Это может привести к сложным макетам. Одна приятная вещь - это один проход рендеринга по сравнению с 3 проходами очень элегантного решения, размещенного с двумя линейными градиентами над сплошным. Он также может использоваться для растягивания любого градиента, например, для создания линейного градиента с углом 22,5 градуса.