Android studio shape shadow

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

Источник

rodrigosimoesrosa / circle_drawable_shadow.xml

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

xml version = » 1.0 » encoding = » utf-8 » ?>

layer-list xmlns : android = » http://schemas.android.com/apk/res/android » >

Shadow —>

item >

shape android : shape = » oval » >

padding

android : bottom = » 1dp «

android : left = » 1dp «

android : right = » 1dp «

android : top = » 1dp »/>

solid android : color = » #00CCCCCC »/>

shape >

item >

item >

shape android : shape = » oval » >

padding

android : bottom = » 1dp «

android : left = » 1dp «

android : right = » 1dp «

android : top = » 1dp »/>

solid android : color = » #10CCCCCC »/>

shape >

item >

item >

shape android : shape = » oval » >

padding

android : bottom = » 1dp «

android : left = » 1dp «

android : right = » 1dp «

android : top = » 1dp »/>

solid android : color = » #20CCCCCC »/>

shape >

item >

item >

shape android : shape = » oval » >

padding

android : bottom = » 1dp «

android : left = » 1dp «

android : right = » 1dp «

android : top = » 1dp »/>

solid android : color = » #30CCCCCC »/>

shape >

item >

item >

shape android : shape = » oval » >

padding

android : bottom = » 1dp «

android : left = » 1dp «

android : right = » 1dp «

android : top = » 1dp »/>

solid android : color = » #50CCCCCC »/>

shape >

item >

Background —>

item >

shape

android : shape = » oval » >

solid android : color = » @android:color/white »/>

shape >

item >

layer-list >

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Урок 4. Android Material Design. Установка теней и обрезка View

Перевод документации официального сайта developer.android.com

Рисунок 1. Тени для различных высот view.

Чтобы установить высоту view в макете используйте атрибут android:elevation. Чтобы установить высоту в коде activity, используйте метод View.setElevation().

Чтобы установить смещение, используйте метод View.setTranslationZ().

Новые методы ViewPropertyAnimator.z() и ViewPropertyAnimator.translationZ() позволяют легко анимировать высоту view. Для получения дополнительной информации, смотрите справку по ViewPropertyAnimator и руководство разработчика о свойствах анимации.

Вы так же можете использовать StateListAnimator чтобы установить анимации декларативно. Это особенно полезно в тех случаях, когда изменяется состояние триггера анимации, например, когда пользователь нажимает на кнопку. Для получения дополнительной информации, смотрите Изменение состояния анимации view.

Значение Z измеряется в dp (density-independent pixels).

Настройте тени и контуры

Границы фона drawable view определяют форму его тени. Контуры представляют собой внешнюю форму графического объекта и определяют область для сенсорного отклика.

Рассмотрим view, определенное с помощью фона dravable:

Фон drawable определен как прямоугольник с закругленными углами:

View отбрасывает тень с закругленными углами, после того как фон drawable установил границы view. Создание пользовательского контура переопределяет форму тени view по умолчанию.

Чтобы установить пользовательский контур для view в коде:

1. Унаследуйтесь от класса ViewOutlineProvider.
2. Переопределите метод getOutline().
3. Назначьте нового поставщика контура для вашего view с помощью метода View.setOutlineProvider() .

Вы можете создать овальные и прямоугольные очертания с закругленными углами используя методы класса Outlines. Поставщик контура для view по умолчанию получает контур из фона view. Чтобы view не отбрасывала тень, установите значение поставщика контура в null.

Обрежьте view

Обрезание позволяет вам легко изменить форму view. Вы можете обрезать view для совместимости с другими элементами дизайна или изменить форму view в ответ на действия пользователя. Вы можете обрезать view к его области контура с помощью метода View.setClipToOutline() или используя атрибут android:clipToOutline. Только прямоугольник, круг и скругленный прямоугольник поддерживают обрезание, как определено в методе Outline.canClip().

Чтобы обрезать view в форме drawable, установите drawable в качестве фона view (как показано выше), и вызовите метод View.setClipToOutline().

Обрезание view это дорогостоящая операция, поэтому не анимируйте форму, которую вы используете чтобы обрезать view. Для достижения этого эффекта используйте Reveal эффект анимации.

Источник

Mastering Shadows in Android

Jan 9, 2018 · 6 min read

If we want to create better apps, I believe that we need to follow material design guideline.In general terms, Material design is a three-dimensional environment containing light, material, and cast shadows. Light and Shadow are important for us if we want to follow material design guideline in our application development process.

I will try to explain following topics in this article.

• 3D in Android
• Depth
• Z value, elevation and Translation Z
• Light
• Button state (Pressed and Resting)
• Outline
• Custom Outline with ViewOutlineProvider

Before deep dive into shadow and light, I want to show you what our environment is.

What is 3D?

The material environmen t is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. In Material Design world, every object has 1 dp thickness.

What is Depth in Android?

Material design differs from other design guides because It has depth. We can say that depth defines view’s importance level in user interface. We can think there is a paper layer in our desk. If we put another paper on it, our eyes will perceive that it has a depth.

Let’s imagine it with an app screenshot from the material design guideline.

Let’s see our elements in the screen.

• Screen (Surface layer — 0 depth)
• Cardviews
• Appbar Layout
• Floating Action Button

Every element has a priority to another. Cardviews can scroll in its recyclerview. So we can say that our first layer is scrollable content. The second layer is appbar layout. The third layer (Top layer) is the floating action button.

So how do we define the order? How do we make the user feel the depth? Answer: Z- value.

What is Z-value in Android?

The Z value for a view has two components:

• Elevation: The static component.
• Translation Z: The dynamic component used for animations.

I always wonder that what is the difference between elevation and translation.

Elevation is static. So you don’t change it dynamically. If you want to animate your view in Z-axis (like pressing and resting) you need to use translation-Z attribute.

Translation Z is dynamic. In your empty project, If you create a button and press it, you will see that shadow gets bigger with an animation. Actually, elevation value is not changing. Translation Z property is changing. Android is using default state list animator changes translation Z property of the view.

Z-Value = Elevation + TranslationZ

What if we change the value of Z of two views that intersect. Does Android handle the order on the screen? Yes. Let me show you that with a diagram that I designed.

Источник