Як зробити градієнтний фон в 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

спробуйте це 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 Srivastava

@Ankit Він буде масштабувати, щоб заповнити макет
Dawid Drozd

2
@Ankit: Ви створюєте файл, що малюється .xml, копіюєте та вставляєте вищевказаний код у цей файл, дуже весело. <RelativeLayout ... android: background = "@ dravable / your_xml_name" ...>
TomeeNS

Крім того, якщо ви хочете, щоб градієнт зникав на всьому екрані, зробіть центральну смугу на 50% непрозорою. У цьому випадку "# 50555994"
Захарій

@Pratik Sharma Як я можу вказати, щоб запустити цей градієнт із певної частини? я маю на увазі, що я просто хочу трохи почати змінювати колір з правого боку
Користувач

316

Наочні приклади допомагають у подібному питанні.

Котельня

Для того щоб створити градієнт, ви створите файл xml у res / dravable. Я дзвоню мою my_gradient_dravable.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 = "лінійний"

Встановіть тип angleдля linearтипу. Він повинен бути кратним 45 градусів.

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

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

type = "радіально"

Встановіть тип gradientRadiusдля radialтипу. Використовуючи %pзасоби, це відсоток найменшого розміру батьківського.

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

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

type = "зачистка"

Я не знаю, чому хтось би використовував підмітання, але я включаю його для повноти. Я не міг зрозуміти, як змінити кут, тому я включаю лише одне зображення.

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

у книзі, яку я читаю, мова йде про те, щоб помістити їх у папку «чернетки». Чи потрібна мені одна в папці?
JGallardo

1
Створіть у папці, що перетягується, і вставте файл gradient.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

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 Patch і не використовувати це?

Посилання нижче містить хороший посібник, як це зробити:

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

Якщо ви наполягаєте на використанні форми, спробуйте веб-сайт нижче (Виберіть Android знизу зліва): http://angrytools.com/gradient/

Я створив подібний градієнт (не точний) тому, який у вас є за цим посиланням: http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.