Как сделать градиентный фон в 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>
kongkea
источник
1
спасибо я уже решил это. но я буду горд, если вы ответите больше. stackoverflow.com/questions/6652547/…
kongkea
попробуйте это webgradients.com
Иван Араки

Ответы:

59

Вы можете создать этот «полуградиентный» вид, используя XML -список слоев, чтобы объединить верхние и нижние «полосы» в один файл. Каждая полоса имеет форму XML.

Смотрите этот предыдущий ответ на SO для подробного урока: мультиградиентные формы .

Гуннар Карлссон
источник
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 Это будет масштабироваться, чтобы заполнить макет
Давид Дрозд
2
@Ankit: Вы создаете отрисовываемый XML-файл, копируете и вставляете приведенный выше код в этот файл. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
Кроме того, если вы хотите, чтобы градиент исчез по всему экрану, сделайте центральную полосу непрозрачностью 50%. В этом случае "# 50555994"
Захария
@Pratik Sharma Как я могу указать, чтобы начать этот градиент из определенной части? я имею в виду, я просто хочу немного изменить цвет с правой стороны
Пользователь
317

Визуальные примеры помогают с этим вопросом.

Boilerplate

Чтобы создать градиент, вы создаете XML-файл в res / drawable. Я называю мой 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"/>

тип = «линейный»

Установите angleдля linearтипа. Оно должно быть кратным 45 градусам.

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

введите описание изображения здесь

тип = «радиальный»

Установите gradientRadiusдля radialтипа. Использование %pозначает, что это процент от наименьшего измерения родителя.

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

введите описание изображения здесь

тип = «зачистка»

Я не знаю, почему кто-то использовал бы развертки, но я включил это для полноты. Я не мог понять, как изменить угол, поэтому я включаю только одно изображение.

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

введите описание изображения здесь

центр

Вы также можете изменить центр развертки или радиальные типы. Значения являются долями ширины и высоты. Вы также можете использовать %pобозначения.

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

введите описание изображения здесь

Suragch
источник
49

Следующая ссылка может помочь вам http://angrytools.com/gradient/. Это создаст пользовательский градиентный фон в Android, как в фотошопе.

Хиты
источник
Мне больше нравится CSS Matic , для других
krozaine
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
Создайте в папке drawable и поместите в файл градиент.xml, чтобы оттуда вы могли получить к нему доступ. Нет необходимости создавать несколько папок.
Хариш
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);
    }
miroslavign
источник
и это должно быть быстрее, чем использование layer-lists
miroslavign
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

Используйте этот код в папке Drawable.

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

Ферас Арабиат
источник