Android linear gradient programmatically

Drawable. Фигуры и градиенты

Shape и ShapeDrawable

Фигуры являются подмножеством Drawable-ресурсов.

Данный вид ресурсов на основе класса ShapeDrawable позволяет описывать простые геометрические фигуры, указывая их размеры, фон и контур с помощью тега .

Можно создавать ресурсы фигур на основе стандартных фигур вроде прямоугольника, эллипса, линии. Для использования ресурсов фигур нужно создать в подкаталоге res/drawable XML-файл, в котором будет присутствовать тег , который в свою очередь может содержать дочерние элементы , ,

Имя файла без расширения будет служить идентификатором (ID): R.drawable.filename в Java-коде и @[package:]drawable/filename в XML-файлах.

Элементы фигуры

— отступы. Возможные атрибуты: android:left, android:top, android:right, android:bottom

— размеры фигуры. Возможные атрибуты: android:height, android:width

— сплошной цвет для фигуры. Возможные атрибуты: android:color

— контур фигуры. Возможные атрибуты: android:width, android:color, android:dashGap (расстояние между черточками), android:dashWidth (длина пунктирной черточки)

rectangle (Прямоугольник)

shape_rect.xml — Атрибут android:shape здесь необязателен: rectangle — это значение по умолчанию.

Пример с градиентным прямоугольником в качестве разделителя

Создадим файл separator.xml:

В разметке приложения добавим код:

У первого разделителя ширина 1dp, у второго — 3dp. Получили красивую полоску.

У прямоугольников можно скруглить углы при помощи тега corners

Можно закруглить углы по отдельности:

oval (Эллипс)

Другой вариант с пунктиром:

ring (Кольцо)

shape_ring.xml — Для кольца имеются дополнительные атрибуты:

innerRadius Внутренний радиус innerRadiusRatio Отношение между внешним и внутренним радиусами. По умолчанию равно 3 thickness Толщина кольца (т.е. разница между внешним и внутренним радиусами) thicknessRatio Отношение ширины кольца к его толщине. По умолчанию равно 9

line (Горизонтальная линия)

shape_line.xml — Линия может быть только горизонтальной

Градиенты: gradient и GradientDrawable

Тег gradient (класс GradientDrawable) позволяет создавать сложные градиентные заливки. Каждый градиент описывает плавный переход между двумя или тремя цветами с помощью линейного/радиального алгоритма или же используя метод развертки.

Тег gradient внутри тега shape. Основные атрибуты: type, startColor (обязателен), endColor (обязателен) и middleColor (необязателен). Также иногда оказывается полезным атрибут centerColor.

Используя атрибут type, вы можете описать свой градиент:

linear

• android:type=»linear» можно опустить, он так и есть по умолчанию. Отображает прямой переход от цвета startColor к цвету endColor под углом, заданным в атрибуте angle.
• Атрибут android:angle используется только линейным градиентом и должен быть кратным значению 45.

Дополнительный материал: Android Dev Tip #3 — помните о прозрачности, который может привести к другому результату.

Также можно задействовать атрибуты centerX и centerY.

radial

Интересный эффект получается при использовании множества радиальных градиентов.

sweep

Рисует развёрточный градиент с помощью перехода между цветами startColor и endColor вдоль внешнего края фигуры (как правило, кольца).

Можно использовать атрибуты android:centerX и android:centerY.

Попробуйте также такой вариант.

А почему бы не повращать?

Примеры с shape

Закругляем уголки у компонентов

Создадим отдельный файл res/drawable/roundrect.xml и с его помощью скруглим уголки у LinearLayout, ImageView, TextView, EditText:

В разметке активности пишем следующее:

Овальный кабинет

В Белом доме есть Овальный кабинет. Если вам придётся писать приложение для администрации президента США, то все элементы нужно сделать овальными. Создадим файл res/drawable/oval.xml:

Заменим в предыдущем примере android:background=»@drawable/roundrect» на android:background=»@drawable/oval».

Источник

How to make gradient background in android

I want to create gradient background where the gradient is in the top half and there’s a solid color in the bottom half, like in this image below:

I can’t because the centerColor spreads out to cover the bottom and top.

How can I make a background like the first image? How can I make small centerColor that’s not spread out?

This is code in XML of background button above.

9 Answers 9

Visual examples help with this kind of question.

Boilerplate

In order to create a gradient, you create an xml file in res/drawable. I am calling mine my_gradient_drawable.xml:

You set it to the background of some view. For example:

type=»linear»

Set the angle for a linear type. It must be a multiple of 45 degrees.

type=»radial»

Set the gradientRadius for a radial type. Using %p means it is a percentage of the smallest dimension of the parent.

type=»sweep»

I don’t know why anyone would use a sweep, but I am including it for completeness. I couldn’t figure out how to change the angle, so I am only including one image.

center

You can also change the center of the sweep or radial types. The values are fractions of the width and height. You can also use %p notation.

Источник

Android LinearLayout Gradient Background

I am having trouble applying a gradient background to a LinearLayout.

This should be relatively simple from what I have read but it just doesn’t seem to work. For reference sakes I am developing on 2.1-update1.

If I change @drawable/header_bg to a color — e.g. #FF0000 it works perfectly fine. Am I missing something obvious here?

10 Answers 10

Ok I have managed to solve this using a selector. See code below:

Hopefully this helps someone who has the same problem.

It is also possible to have the third color (center). And different kinds of shapes.

For example in drawable/gradient.xml:

This gives you black — gray — black (left to right) which is my favorite dark background atm.

Remember to add gradient.xml as background in your layout xml:

It is also possible to rotate, with:

gives you a vertical line

gives you a horizontal line

Possible angles are:

Also there are few different kind of shapes:

and problably a few more.

Hope it helps, cheers!

In XML Drawable File:

In your layout file: android:background=»@drawable/gradient_background»

Try removing android:gradientRadius=»90″. Here is one that works for me:

With Kotlin you can do that in just 2 lines

Change color values in the array

Result

My problem was the .xml extension was not added to the filename of the newly created XML file. Adding the .xml extension fixed my problem.

I would check your alpha channel on your gradient colors. For me, when I was testing my code out I had the alpha channel set wrong on the colors and it did not work for me. Once I got the alpha channel set it all worked!

I don’t know if this will help anybody, but my problem was I was trying to set the gradient to the «src» property of an ImageView like so:

Not 100% sure why that didn’t work, but now I changed it and put the drawable in the «background» property of the ImageView’s parent, which is a RelativeLayout in my case, like so: (this worked successfully)

You can used a custom view to do that. With this solution, it’s finished the gradient shapes of all colors in your projects:

I also create an open source project GradientView with this custom view:

Источник

Полный список

— изучаем подклассы Shader

Используя подклассы класса Shader мы получаем возможность «рисовать рисунком». Для этого необходимо передать объект Shader в метод кисти setShader и кисть будет использовать рисунок шейдера для рисования объектов. Рассмотрим существующих наследников класса Shader.

Примеры я буду делать в Activity. Вся графика будет реализована в классе DrawView.

Для создания этого шейдера необходимо передать ему Bitmap и указать вертикальный и горизонтальный TileMode. Подробно про режимы TileMode можно посмотреть в Уроке 163.

Перепишем класс DrawView:

Читаем ic_launcher в Bitmap, создаем шейдер и передаем этот шейдер в метод кисти setShader. И используя эту кисть рисуем квадрат и круг.

Мы использовали TileMode.REPEAT, поэтому изображение повторяется по всему доступному пространству.

К шейдеру можно применить преобразования, используя матрицу (о матрицах был Урок 144).

Перепишем метод createShader:

В матрице настраиваем растяжение и поворот и передаем ее в шейдер методом setLocalMatrix. Смотрим результат

Можно растянуть Bitmap на всю канву

Методом createScaledBitmap создаем копию bitmap размером с канву.

Этот шейдер позволяет нам получить градиент. У его класса есть два конструктора. Оба просят от нас указать им TileMode и координаты линии, которая будет задавать одновременно направление, начало и размер градиента.

Разница заключается в способе указания цветов для градиента. Один конструктор просит от нас указать ему два цвета. По ним он и нарисует градиент.

Указываем красный и зеленый цвета. Линию указываем (0,0)-(100,20). Градиент будет идти в направлении линии и будет размером с длину этой линии. В качестве TileMode передаем MIRROR.

Другой конструктор позволяет задать массив цветов и их положений в градиенте.

Передаем массив цветов, а вместо массива позиций передаем null – градиент сам равномерно распределит цвета..

Теперь попробуем задать позиции вручную.

Обратите внимание, что я здесь использовал TileMode REPEAT. В таком режиме лучше будет видно распределение цветов по градиенту. Также, я немного изменил координаты линии, чтобы градиент стал побольше и чисто горизонтальным.

В массиве позиций передаем три позиции (соответственно количеству цветов). Чтобы понять, что означают эти позиции, давайте примем за единицу размер градиента (в нашем случае это ширина). А позиции будут обозначать в каком месте градиента будет максимальное насыщение соответствующим цветом.

В нашем примере три цвета: красный синий, зеленый. И три позиции: 0, 0.5, 1. Т.е. красный будет располагаться в начале градиента (0), синий – в середине (0.5), а зеленый – в конце (1). Пространство между цветами будет заполнено соответствующим градиентом.

Немного изменим позиции и сместим синий правее, тем самым увеличивая зону красно-синего градиента и уменьшая зону сине-зеленого.

Для синего позиция стала равной 0.7 и он ушел правее.

Для класса RadialGradient указываем центр и радиус и градиент пойдет от центра к краям. А SweepGradient – градиент, который идет по кругу вокруг центра. У этих двух классов, аналогично LinearGradient, есть простой конструктор, где можно указать два цвета, а есть посложнее — с возможностью указания массива цветов и их соотношений.

Примеры использования xml-вариантов RadialGradient и SweepGradient можно посмотреть в уроке 162.

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник