Android shape bottom stroke

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, Selector Examples

Shape, selector, and layer-list are usually used to create custom drawable resources in android development. Those three XML elements can save a lot of UI resources and time if being used properly. This article will show you how to use them correctly.

1. Custom Drawable File Overview.

1. All the three XML elements should be defined in an XML file under the app/res/drawable folder. The file name is just the drawable resource id.
2. For example, if app/res/drawable/my_layer_list.xml is just the file. Then you can refer to it in both java code or other XML files.
3. Refer to the my_layer_list.xml in Java Code: R.drawable.my_layer_list.
4. Refer to the my_layer_list.xml in Xml Code : Android:background=”@drawable/my_layer_list”.

2. Shape.

The shape is used to define custom shapes in android drawable resources. It is used in both selector and layer-list elements. It has the below properties.

1. Android:shape : Value can be “line“, “rectangle“, “oval” or “ring“.

2.1 Shape’s Sub Element.

2.1.1 .

1. The gradient XML element is used to define color gradual change style. It has the below attributes.
2. Android:startColor: Start color value.
3. Android:endColor: End color value.
4. Android:angle: Gradient angle, 0 means from left to right, 90 means from bottom to top, the value should be an integer that is multiple of 45, the default value is 0.
5. Android:type: linear, radial, and sweep.
6. Below is an example of the gradient XML element.
7. Below is the above example’s XML source code.

1. The solid XML element is used to define shape internal fill color. It will override the attributes effect. It has the below attributes.
2. Android:color: The color value that is used to fill the shape.
3. Below is an example of the solid XML element.
4. Below is the above example’s XML source code.

1. The stroke XML element is used to define shape bolder style. It has the below XML attributes.
2. Android:width : Border width.
3. Android:color: Border color.
4. Android:dashWidth : Dash border width.
5. Android:dashGap: Gap between two dashes of the border.
6. Below is an example of the stroke XML element.
7. Below is the above example’s XML source code.

1. The corners XML element is used to define shape corner style. It has the below XML attributes.
2. Android:radius: The radius of the corner. The bigger the radius value, the round-shaped the corner.
3. Android:topRightRadius: Top right corner radius value.
4. Android:bottomLeftRadius: Bottom left radius value.
5. Android:topLeftRadius: Top left radius value.
6. Android:bottomRightRadius: Bottom right radius value.
7. Below is an example of the corners XML element.
8. Below is the above example’s XML source code.

1. The padding XML element is used to define the padding values. It has the below XML attributes.
2. android:top: Top padding value.
3. android:bottom: Bottom padding value.
4. android:left: Left padding value.
5. android:right: Right padding value.
6. Below is an example of the corners XML element. There are two custom shapes in the below example. The green shape is drawn at the top because it is defined at last in the layer-list definition.
7. Below is the above example’s XML source code.

1. The size XML element is used to define the shape width and height value.

3. Selector.

The selector is used to define the view component’s background color or background image by it’s various states.

3.1 View Component’s State.

A view component has various state. For example, a button has following states:

1. android:state_pressed : Boolean value, true means button is pressed, false means button is not pressed.
2. android:state_enabled : Boolean value, true means button is enabled, false means button is disabled.
3. android:state_focused : Boolean value, true means button is focused, false means button lost focus.
4. android:state_window_focused : Boolean value, this is the button default state. It is same as do not specify button state.

3.2 Selector Definition.

You should define a selector in a xml file under app / res / drawable folder. Such as my_selector.xml

You can define several items in the selector definition xml file. Each item include a drawable object (color or image) that will be used for a button state.

Android system will check each item in the selector by it’s list order, if one item match current button state, then use that drawable object. If no state match, then use default item.

Please Note : The default state item should be written in the end of the selector xml. If you put it at the beginning of selector xml, no other state will take effect.

From above example, we can see below default state item at the end of the xml.

It behaves same as below default state item.

If we apply above selector drawable to a button as background.

We can see below screen effect. When the button is pressed, the background color is green, when not pressed the background color change to orange.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/t-D2511VoYg

Above example use some custom color variables, if you do not know, please read How To Define Custom Color Variables In Android Studio.

Источник

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:

Источник