Androidでグラデーション背景を作成する方法


229

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

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

ボタンのグラデーションでは、白い水平線が上から下に向かって青にフェードインします。

最初の画像のような背景を作成するにはどうすればよいですか?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>

1
おかげで私はすでにそれを解決しました。でも、もっと答えてもらえたら誇りに思います。stackoverflow.com/questions/6652547/...
kongkea

回答:



317

これで試してください:

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

線形レイアウトの背景にグラデーションを付けたい場合はどうすればよいですか?
Ankit Srivastava 2013

@Ankitレイアウトに合わせて拡張されます
Dawid

2
@Ankit:描画可能な.xmlファイルを作成し、上記のコードをこのファイルにコピーして貼り付けます。<RelativeLayout ... android:background = "@ drawable / your_xml_name" ...>
TomeeNS

また、画面全体でグラデーションをフェードさせる場合は、中央バンドを50%の不透明度にします。この場合、 "#50555994"
Zachary

@Pratik Sharma特定の部分からこのグラデーションを開始するように指定するにはどうすればよいですか?つまり、右側から少しだけ色の変更を開始したいということです
ユーザー

317

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

ボイラープレート

グラデーションを作成するには、res / drawableにxmlファイルを作成します。私は私のmy_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"

設定しanglelinearタイプ。45度の倍数でなければなりません。

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

ここに画像の説明を入力してください

type = "radial"

設定しgradientRadiusradialタイプ。使用%pするとは、親の最小寸法のパーセンテージを意味します。

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

ここに画像の説明を入力してください

type = "sweep"

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

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

ここに画像の説明を入力してください

センター

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

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

ここに画像の説明を入力してください



33

まず、次のように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>

私が読んでいる本では、それらをdrawablesフォルダに入れることについて話しています。フォルダーごとに1つ必要ですか?
JGallardo 2014年

1
ドローアブルフォルダーを作成し、そこにgradient.xmlファイルを配置すると、そこにアクセスできます。複数のフォルダーを作成する必要はありません。
Harish、2014年

22

または、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);
    }

そして、それはレイヤーリストを使用するよりも速くなるはずです
ミロスラヴィン

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


3

ドローアブルフォルダーでこのコードを使用します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3f5063" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="0dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <gradient
        android:angle="45"
        android:centerColor="#015664"
        android:endColor="#636969"
        android:startColor="#2ea4e7" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>

1

イメージまたは9パッチイメージを作成して使用しないのはなぜですか?

以下のリンクは、それを行う方法についての素晴らしいガイドを持っています:

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.