web-dev-qa-db-ja.com

アンドロイドでグラデーションの背景を作る方法

下の図のように、グラデーションが上半分にあり、下半分に単色があるグラデーションの背景を作成します。

centerColorが下と上を覆うように広がっているので、できません。

In the gradient for the button, a white horizontal line fades over blue toward the top and botton.

最初の画像のように背景を作るにはどうすればいいですか。どのように私は広げられない小さいcenterColorを作ることができますか？

これは上の背景ボタンのXMLのコードです。

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
    <gradient 
        Android:startColor="#6586F0"
        Android:centerColor="#D6D6D6"
        Android:endColor="#4B6CD6"
        Android:angle="90"/>
    <corners 
        Android:radius="0dp"/>


</shape>
androidbackgroundgradientshapes
173
kongkea

この「ハーフグラデーション」の外観を作成するには、xml Layer-List を使用して、上部と下部の「バンド」を1つのファイルにまとめます。各バンドはxml形です。

詳しいチュートリアルについては、SOに関する以前の回答を参照してください。 マルチグラデーション図形 。

52
Gunnar Karlsson

これを試してみてください。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >

    <gradient
        Android:angle="90"
        Android:centerColor="#555994"
        Android:endColor="#b5b6d2"
        Android:startColor="#555994"
        Android:type="linear" />

    <corners 
        Android:radius="0dp"/>

</shape>
268
Pratik Sharma

視覚的な例は、この種の質問に役立ちます。

定型文

グラデーションを作成するには、res/drawableでxmlファイルを作成します。私はminemy_gradient_drawable.xmlを呼び出しています。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <gradient
        Android:type="linear"
        Android:angle="0"
        Android:startColor="#f6ee19"
        Android:endColor="#115ede" />
</shape>

あなたはそれを何らかのビューの背景に設定します。例えば：

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

type = "linear"

angleをlinear型に設定します。 45度の倍数でなければなりません。

<gradient
    Android:type="linear"
    Android:angle="0"
    Android:startColor="#f6ee19"
    Android:endColor="#115ede" />

enter image description here

type = "radial"

gradientRadiusをradial型に設定します。 %pを使用することは、それが親の最小寸法のパーセントであることを意味します。

<gradient
    Android:type="radial"
    Android:gradientRadius="10%p"
    Android:startColor="#f6ee19"
    Android:endColor="#115ede" />

enter image description here

type = "sweep"

なぜ誰かがスイープを使うのか私にはわかりませんが、完全を期すために含めています。角度の変更方法がわからなかったので、1つの画像だけを含めています。

<gradient
    Android:type="sweep"
    Android:startColor="#f6ee19"
    Android:endColor="#115ede" />

enter image description here

センター

スイープタイプまたはラジアルタイプの中心を変更することもできます。値は幅と高さの分数です。 %p表記を使うこともできます。

Android:centerX="0.2"
Android:centerY="0.7"

enter image description here

216
Suragch

次のリンクはあなたを助けるかもしれません http://angrytools.com/gradient/ 。これはphotoshopのようにAndroidのカスタムグラデーションの背景を作成します。

45
Hits

まず、次のようにgradient.xmlを作成する必要があります。

<shape>
    <gradient Android:angle="270" Android:endColor="#181818" Android:startColor="#616161" />

    <stroke Android:width="1dp" Android:color="#343434" />
</shape>

それからあなたはレイアウトの背景で上記の勾配を言及する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:background="@drawable/gradient"
    >   
</LinearLayout>
27
Harish

あるいは、PSDで考えられるものは何でもコードで使用できます。

    private void FillCustomGradient(View v) {
        final View view = v;
        Drawable[] layers = new Drawable[1];

        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient lg = new LinearGradient(
                        0,
                        0,
                        0,
                        view.getHeight(),
                        new int[] {
                                 getResources().getColor(R.color.color1), // please input your color from resource for color-4
                                 getResources().getColor(R.color.color2),
                                 getResources().getColor(R.color.color3),
                                 getResources().getColor(R.color.color4)},
                        new float[] { 0, 0.49f, 0.50f, 1 },
                        Shader.TileMode.CLAMP);
                return lg;
            }
        };
        PaintDrawable p = new PaintDrawable();
        p.setShape(new RectShape());
        p.setShaderFactory(sf);
        p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
        layers[0] = (Drawable) p;

        LayerDrawable composite = new LayerDrawable(layers);
        view.setBackgroundDrawable(composite);
    }
21
miroslavign
//Color.parseColor() method allow us to convert
// a hexadecimal color string to an integer value (int color)
int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};

//create a new gradient color
GradientDrawable Gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);

Gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(Gd);

ここから参照してください https://Android-- code.blogspot.in/2015/01/Android-button-gradient-color.html

6
UpendranathReddy

**描画可能なフォルダでこのコードを使う**

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="#3f5063"
    />

<corners Android:bottomRightRadius="0dp" Android:bottomLeftRadius="30dp" Android:topLeftRadius="30dp" Android:topRightRadius="0dp" />
<padding Android:left="2dp" Android:top="2dp" Android:right="2dp" Android:bottom="2dp" />
<gradient
    Android:startColor="#2ea4e7"
    Android:centerColor="#015664"

    Android:endColor="#636969"
    Android:angle="45"
    >

</gradient>
<stroke Android:color="#000000"

    Android:width="1dp">

</stroke>
1
Muthu Krishnan

なぜイメージや9 Patchイメージを作成してそれを使用しないのですか？

以下のリンクはそれをする方法に関する素晴らしいガイドを持っています：

http://Android.amberfog.com/?p=247

Shapeの使用を主張する場合は、以下のサイトを試してください（左下のAndroidを選択）： http://angrytools.com/gradient/

私はあなたがこのリンクに持っているものと同様のグラデーション（正確ではない）を作成しました： http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

1
Feras Arabiat