Android shape line gravity

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

Источник

Android Shape Drawables Tutorial

Nov 3, 2017 · 6 min read

Have you ever wanted to reduce your Android application’s size or make it look more interesting? If yes, then you should try out ShapeDrawables.

First, we will go over the advantages and disadvantages of the ShapeDrawables. Then we will create some Drawables that could be used in your app and lastly for the grand finale we will try to replicate a gradient as can be seen in the Spotify app/website.

Why should you use ShapeDrawables?

When you want to use PNG or JPEG images in your applic a tion, you have to provide multiple copies of the same image for different screen densities. That, of course, clutters your app with copies of the same image. Yes, sometimes that is the path we have to choose because we can’t use Drawables for every single case, but we can dramatically reduce our application’s size if we can use Drawables instead. ShapeDrawables are a series of commands that tell how to draw something on the screen. That is why they can be resized and stretched as much as we want, without losing any quality. We can recolor and manipulate them even when the app is running and use the same ShapeDrawable multiple times in our app. Since ShapeDrawables are a subclass of the Drawable abstract class, we can use them in methods where a Drawable is expected. Click for the documentation of the ShapeDrawable.

Are there any disadvantages?

Of course, just like I have mentioned before we can’t use them in every case. I have said before that ShapeDrawable class is a subclass of the Drawable abstract class. There are other subclasses as well and every one of them has its own use case. You can click here to check other Drawable types and figure out which one is right for your case. Another issue is that they took a bit longer to draw than a Bitmap since there is a lot of parsing and drawing going on behind the scenes. But I think that is not a huge problem if your Drawables are simple.

My opinion is that you should use Drawables (ShapeDrawables) wherever you can, because they are easy to modify and they don’t take much space.

Let’s start coding

First let’s take a look at a simple example and then we will recreate a gradient as can be seen in the Spotify app/website.

Create a simple gradient ShapeDrawable in XML

First create a new drawable resource file.

Right click on res/drawable > New > Drawable resource file > give your file a name > use shape as a root element > click Ok

Shape root element defines that this is a ShapeDrawable.

This is how the first example looks like:

Источник

Использование XML Drawables в приложениях

Если вы хотите использовать PNG- или JPEG-изображения в своём приложении, вы должны будете предоставить несколько копий этих изображений для разных плотностей экрана. При большом количестве таких изображений это может сделать ваше приложение весьма громоздким. Решение здесь — использовать вместо картинок изображения, описанные с помощью XML.

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

Недостатком такого подхода может являться то, что такие изображения можно использовать только там, где используются обычные Drawable. Другой проблемой может являться то, что их рисование иногда занимает больше времени, чем рисование растрового изображения. Однако эти минусы не так существенны перед возможностями модифицировать изображения и уменьшить размер APK приложения. В этой статье мы разберём несколько примеров реализации XML Drawable в приложении.

Основные элементы

При рисовании изображения в XML главным тегом является — корневой элемент для геометрической фигуры. Он имеет следующие атрибуты:

• android:shape — тип фигуры. Может принимать значения oval, rectangle, ring, line. Если атрибут не задан, то по умолчанию берётся rectangle.
• android:innerRadius — радиус внутренней части кольца. Используется для ring.
• android:innerRadiusRatio — радиус внутренней части кольца, выраженный как отношение ширины кольца. Используется для ring.
• android:thickness — толщина кольца. Используется для ring.
• android:thicknessRatio — толщина кольца, выраженная как отношение ширины кольца. Используется для ring.
• android:useLevel — true если используется как LevelListDrawable. Обычно должен быть false, иначе ваша фигура может не отобразиться.

Затем внутри тега используются следующие теги:

• — создаёт закруглённые углы для фигуры. Применяется только тогда, когда в атрибуте android:shape задано значение rectangle. Атрибуты:
  • android:radius — радиус закругления углов. В данном случае все углы будут иметь одинаковый радиус, однако вы можете переопределить радиус отдельно для каждого угла с помощью атрибутов ниже.
  • android:topLeftRadius — верхний левый угол.
  • android:topRightRadius — верхний правый угол.
  • android:bottomLeftRadius — нижний левый угол.
  • android:bottomRightRadius — нижний правый угол.
• — задаёт параметры градиента для фигуры. Атрибуты:
  • android:angle — угол для градиента, в градусах. Должен быть кратным 45.
  • android:centerX — смещение X-координаты относительно центра градиента.
  • android:centerY — смещение Y-координаты относительно центра градиента.
  • android:startColor — начальный цвет градиента.
  • android:centerColor — дополнительный цвет, который находится между начальным и конечным цветами.
  • android:endColor — конечный цвет градиента.
  • android:gradientRadius — радиус градиента. Применяется только при типе градиента radial,
  • android:useLevel — true, если используется как LevelListDrawable.
  • android:type — тип градиента. Может иметь следующие значения: linear — линейный градиент (по умолчанию); radial — радиальный, начальный цвет находится в центре; sweep — развёрточный градиент, который идёт по кругу вокруг центра.
• — заполняет фигуру сплошным цветом. Атрибуты:
  • android:color — цвет заливки.
• — рисует линию для фигуры. Можно рассматривать как границу фигуры. Атрибуты:
  • android:width — толщина линии.
  • android:color — цвет линии.
  • android:dashWidth — толщина каждого штриха. Работает только в случае, если задан атрибут android:dashGap.
  • android:dashGap — расстояние между штрихами. Работает только в случае, если задан атрибут android:dashWidth.
• — задаёт размер фигуры. Атрибуты:
  • android:width — ширина фигуры.
  • android:height — высота фигуры.

• — отступы, применяемые к содержимому элемента View. Меняет отступы только View, не самой фигуры. Атрибуты:

  • android:left — отступ слева.
  • android:right — отступ справа.
  • android:top — отступ сверху.
  • android:bottom — отступ снизу.

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

Круг с градиентом

Вы можете использовать XML Drawables для создания элементов дизайна или функциональных элементов интерфейса. Например, можно нарисовать вот такой круг и залить его градиентом.

В результате получим вот такое изображение.

Фон для кнопки

Кнопкам в Android можно задавать различный фон, в том числе и собственноручно нарисованный. Это довольно просто и не требует особо большого количества элементов. Например, кнопку ниже можно использовать для навигации в приложении.

Фон для текста

Аналогично кнопка, TextView также можно задать любой фон. Например, вот так:

Использование Layer List

Бывают ситуации, когда нужно составить изображение из разных фигур. Это возможно с помощью тега , который позволяет комбинировать элементы . Каждый элемент внутри рисуется в порядке списка — последний в списке рисуется поверх остальных слоёв. Каждая фигура помещает в тег , который представляет собой элемент списка.

Например, можно создать вот такую комбинацию из двух эллипсов, которую можно использовать как метку для маркированного списка.

А с помощью кода ниже можно создать подобие почтовой марки:

Использовать фигуры одного типа необязательно, можно использовать разные типы. Нарисуем иконку, комбинирующую прямоугольник и линию, перечёркивающую его.

StateDrawable

У некоторых элементов интерфейса существуют различные состояния, с которыми можно работать. Например, у Button можно отслеживать состояние pressed (нажат) и менять при этом фон кнопки. Для этого создадим селектор, который будет отслеживать состояния кнопки и ставить нужный фон.

У селектора есть следующие атрибуты, определяющие состояние элемента:

• android:state_pressed — когда пользователь нажимает на элемент.
• android:state_focused — когда на элементе установлен фокус ввода.
• android:state_enabled — когда элемент доступен.
• android:state_checked — когда элемент в списке был отмечен.

С помощью значений true\false определяем, какое состояние нужно отследить и в атрибут android:drawable добавляем нужный фон.

button_pressed.xml:

button_focused.xml:

button_enabled.xml:

В результате получим следующую кнопку, которая будет менять свой цвет в зависимости от состояния.

Кнопки это не единственные элементы, у которых можно отслеживать состояния. Например, это можно делать также для элементов RadioButton и CheckBox с помощью атрибута android:state_checked. Например, с помощью кода ниже можно добавить в приложение свою картинку, которой будет отмечаться выбранный элемент CheckBox.

Аналогичным образом отслеживается состояние у RadioButton.

В качестве drawable здесь может быть любое изображение, в нашем приложении «Карточки для детей» с помощью селекторов используются белые галочки и фон.

Также в селекторе вместо изображений можно рисовать свои собственные фигуры, как это показано ниже.

Здесь мы при нажатии на кнопку делаем её чуть темнее.

Как можно увидеть, у XML Drawables есть множество применений, которое ограничивается лишь фантазией разработчика. Рисование своих изображений поможет сделать ваше приложение уникальнее и заметнее среди других.

Использование XML Drawables в приложениях : 1 комментарий

Спасибо за познавательную статью!
А есть ли способ добавить тень контролу в api V17 — 19 ?
Спасибо.

Источник