Androidでの円形グラデーション

画面の中央から白く発光し、画面の端に行くにつれて黒くなるグラデーションを作ろうとしています。

このように「通常の」グラデーションを作成するので、さまざまな形状を試しています。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

「楕円」形を使用すると、少なくとも丸い形になりますが、グラデーション効果はありませんでした。どうすればこれを達成できますか？」

あなたはを使用して円形のグラデーションを得ることができますandroid:type="radial"：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

私は新しいコンセプトを学ぶときにいつも役立つ画像を見つけるので、これは補足的な答えです。

これ%pは、親のパーセンテージ、つまり、ドローアブルを設定したビューの最も狭いディメンションのパーセンテージを意味します。上記の画像は、gradientRadius、このコードのを

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

backgroundこのようにビューの属性に設定できます

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

センター

半径の中心を変更することができます

android:centerX="0.2"
android:centerY="0.7"

ここで、小数はx、yそれぞれの幅と高さの分数です。

ドキュメンテーション

ここでは、もう少し説明するドキュメントのメモをいくつか示します。

android:gradientRadius

グラデーションの半径。放射状グラデーションでのみ使用されます。明示的な寸法または形状の最小寸法を基準とした小数値の場合があります。

「1.2」などの浮動小数点値の場合があります。

「14.5sp」などの単位が追加された浮動小数点数であるディメンション値の場合があります。使用可能な単位は、px（ピクセル）、dp（密度非依存ピクセル）、sp（優先フォントサイズに基づいてスケーリングされたピクセル）、in（インチ）、mm（ミリメートル）です。

"14.5％"のように、％または％pが付加された浮動小数点数である小数値の場合があります。サフィックス％は、常にベースサイズのパーセンテージを意味します。オプションの％pサフィックスは、いくつかの親コンテナに相対的なサイズを提供します。

複数の色や配置など、より詳細な制御が必要な場合は、コードで行うこともできます。これが、描画可能な放射状グラデーションを作成するための私のKotlinスニペットです。

object ShaderUtils {
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {

        override fun resize(width: Int, height: Int): Shader {
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        }
    }

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable {
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    }
}

基本的な使用法（ただし、追加のパラメーターで自由に調整してください）：

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

android：centerColorを追加する必要があると思います

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

この例では、白から黒、白への水平方向のグラデーションを表示します。

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>

グラデーション、ストーク、円形の完全なxmlです。

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:width="5dp"/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android:width="200dp" android:height="200dp"/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>