How to create shadow in Android Buttons?
This example demonstrates how How to create shadow in Android Buttons.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.
Step 2 − Add the following code to res/layout/activity_main.xml.
Step 3 − Add the following code to src/MainActivity.java
Step 4 − Add the following code to res/drawable/shadow_button_layer_list.xml
Step 5 − Add the following code to Manifests/AndroidManifest.xml
Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from android studio, open one of your project's activity files and Click Run Icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen –
Урок 4. Android Material Design. Установка теней и обрезка View
Material design вводит понятие высоты для элементов пользовательского интерфейса. Высота помогает пользователям понять относительную важность каждого элемента и сосредоточить свое внимание на задаче.
Высота view представленная с помощью оси Z, определяет внешний вид его тени: view с более высоким значением Z отбрасывают большие, более мягкие тени. View с высшим значением Z перекрывают view с низшим значением Z; однако, значение Z не влияет на размер самого view.
Высота также полезна для создания анимаций, когда виджеты временно поднимаются выше плоскости view при выполнении какого-либо действия.
Для получения дополнительной информации о высоте в материальном дизайне, смотрите Объекты в 3D пространстве.
Установите высоту ваших View
Значение Z для view состоит из двух составляющих:
– Высота (elevation): статическая составляющая.
– Смещение (translation): динамическая составляющая, используемая для анимаций.
Z = elevation + translationZ
Рисунок 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 эффект анимации.
Simple custom shadow on Android
There might be some rare specific cases when elevation is not enough. In this post we are going to see how to create a custom shadow wrapper in a fast-easy way, using Drawables. At the end of this post you will be able to set a custom shadow for a single component such as an image, I will leave a link to the GitHub repo at the end.
The first thing we will need is a wrapper layout that will represent and eventually draw the shadow, sticking to an image example, we want to put the ImageView inside the wrapper layout like this:
Exit fullscreen mode
Once this is set we can start working on the shadow itself, on the fragment or activity we’ll get a reference to the wrapper view and add the shadow using Kotlin code. The main class that provides the shadow is a ShapeDrawable , we are going to create an object of this class and later we will later set it as background for the wrapper view. This class has a function called setShadowLayer , this allows us to set blur, offsets and color of the shadow. The blur option is the one that controls how “big” or how much the shadow spreads around the child view, ideally this should be a bit smaller than the padding we set to the wrapper view so that the shadow does not cut off. So in this case we’ll take the padding and subtract 4dp to get the shadow’s blur value like this:
Exit fullscreen mode
Here we set a color with 80% opacity for the shadow, and set the same color but with no opacity to the shape itself using the setTint function. If we don’t set color for the shape to be the same as the shadow we might get a black color around the image when using dy or dx options.
If we want the shadow to have shape, we can use a RoundRectShape to mold the shadow, this RoundRectShape takes an array with 8 float values that represent the corners of a rect, each corner takes 2 values, you can play around with each corner values in case you want to get a particular shape. If you don’t want the shadow to have a shape or rounded corners you can omit this part.
Exit fullscreen mode
At this point, if we set the shapeDrawable as background to the wrapper layout, the shadow won’t be visible, we need to add inset with the help of a LayerDrawable , ideally the inset will be the same as the padding of the wrapper view, this can’t be smaller than padding of the wrapper view, so that the shapeDrawable itself stays behind the ImageView and only the shadow is visible.
Exit fullscreen mode
And this is the final result:
If we’d like, we can set padding for the wrapper layout to the sides where we’d like the shadow to be visible, for example if we only want the shadow to be at the bottom and right, we could only set paddingBottom and paddingRight on the wrapper layout, but that is not the best solution, lets see a better option.
Using the offsets options in the setShadowLayer we can control placement of the shadow, but we’ll need to make a few adjustments like reducing the blur and making use of a BlurMaskFilter on the shapeDrawable . This is the code for it:
Exit fullscreen mode
These adjustments are needed so that the shadow doesn’t get cut off and draws nicely below the image, all the rest of the code stays the same and the results look like this:
Conclusion
This is one easy option to create a custom shadow, if you are in the need of a quick solution this can be of help, specially if you only need to apply it in one specific place/view. Although this example is not reusable and might not be the best solution for you, you can play around with it to see if it can suit your needs, there are also other options to create custom shadows that you can find browsing the web. You can explore and use the best for your case!
Всем выйти из сумрака: как добавить тень на Android
Когда заходит речь про тени на Android, возникает сразу несколько вопросов. Первый: зачем они нужны? Второй: почему нельзя использовать системные тени и жить счастливо? Третий: если нельзя использовать системные тени, как реализовать кастомные?
Это Сергей Петров, Android-разработчик в команде Design System inDrive, и вместе мы поговорим о тенях на Android.
На второй вопрос вам ответят дизайнеры. Возможно, вы попытаетесь убедить их в том, что системные тени мы получаем почти бесплатно, с минимальными трудозатратами и максимальной производительностью. Вероятно, вы приведете в качестве аргумента соответствие гайдлайнам Material.
Искренне надеюсь, что ваша стойкость и убедительность позволит вам и дальше использовать elevation для отрисовки теней. Если нет — придется искать ответ на третий вопрос.
Оговорюсь, что изначально я пробовал подобрать нужные значения параметров для системных теней. В Android, начиная с API 21, доступны атрибуты темы ambientShadowAlpha и spotShadowAlpha. С помощью них можно регулировать глобальные настройки прозрачности теней.
А позже в API 28 добавили возможность настраивать цвета теней через атрибуты темы outlineAmbientShadowColor и outlineSpotShadowColor, а также свойства View — outlineAmbientShadowColor и outlineSpotShadowColor.
Elevation
Попробуем подобрать подходящий elevation и прозрачность тени, и посмотрим, что из этого получится.
У нас в дизайне есть три разновидности теней (представлены на картинке ниже):
У каждой тени свои настройки прозрачности и смещения по оси Y. На смещение мы влиять не можем, но хотя бы попробуем подобрать значения прозрачности. Сложность в том, что до API 28 эти значения глобальны в рамках темы. Задать разным по стилю теням разные прозрачности, как в дизайне, возможности нет. К тому же, цвет тени в дизайне не черный, как в дефолтном Android. Что ж, попробуем добиться хотя бы примерного сходства.
Долго и усердно подбираем значения, примерно подходящие всем трем теням сразу.
Тень S — дизайн 
Тень S — elevation 8dp 
Тень M — дизайн 
Тень M — elevation 24dp 
Тень L — дизайн 
Тень L — elevation 30dp
Кажется, получается довольно неплохо. Тень S слегка отличается, но две другие выглядят сносно. Настроить точнее при помощи общих настроек прозрачности вряд ли получится, но, начиная с API 28, можно получить совсем точное совпадение.
Получается, задача решена, и можно убеждать дизайнера, что тень S будет слегка отличаться от дизайна. В конце концов, пользователь вряд ли это заметит, да и кто вообще из пользователей Android обращает внимание на такие мелочи.
Но оказалось, что не все так просто. В Android два источника света: ambient light, который светит во все стороны, и key light — светит направленно. Кому интересно, в этой статье очень хорошо и с картинками раскрыта эта тема.
Источники света в Android
Тот, что светит сверху под углом, и есть key light. Он дает ярко выраженную тень в нижней части объекта. И вот, что происходит с тенью, особенно при больших elevation , по мере отдаления от верхней части экрана.
Тень L — элемент в верхней части экрана 
Тень L — элемент в нижней части экрана
Как в жизни: чем дальше от источника света, тем длиннее тень. Можно ли на это повлиять? В данной статье в разделе Don’t try this at home утверждается, что да, но у меня не получилось. Но даже если бы и получилось, и на код-ревью закрыли глаза на этот очевидный хак, это не решило проблемы полностью. Где бы не размещался источник света, тени в любом случае были бы неравномерными. Причина тому — большой elevation , необходимый для достижения нужного эффекта.
Изрядно расстроившись, переходим к плану Б — рисовать тень самостоятельно.
MaterialShapeDrawable
Раз не получилось с elevation , попробуем другой бесплатный метод. Вспоминаем, что в Material библиотека имеет поддержку теней и на античных устройствах. Давайте посмотрим на реализацию.
Заглядываем внутрь MaterialShapeDrawable и видим, что они на пару с неким ShadowRenderer занимаются интересными вещами. По заданным параметрам формы тень отрисовывается при помощи шейдеров LinearGradient и RadialGradient. То есть, тень — это градиент вокруг формы.
Идея интересная, попробуем ее в действии. Для этого сделаем простую кастомную вьюшку и посмотрим, что получится.
Тень MaterialShapeDrawable
Кажется, работает, но есть пару негативных моментов. Во-первых, настройки прозрачности градиента зашиты в ShadowRenderer. Чтобы сделать тень по своим параметрам, придется собирать код, разбросанный по нескольким классам, и копировать в проект.
Во-вторых, производительность решения оставляет желать лучшего. Ради интереса решено было повесить на вьюшку аниматор, который менял ее размер, и посмотреть, как будет работать отрисовка. Лаги, даже на релизной сборке, были заметны невооруженным глазом, что подтвердил и systrace .
Время отрисовки кадра — 18 миллисекунд
Время отрисовки одного кадра — 18 миллисекунд. Это только draw одной вьюшки на экране. А draw — довольно частая операция ��
Пожалуй, поищем другое решение. Но, стоит сказать, что идею с Drawable и отрисовкой тени за пределами собственных границ View я взял именно здесь.
Как еще нарисовать тень
В процессе поиска ответа на этот вопрос нашлись еще 3 способа, помимо указанных выше.
Paint.setShadowLayer — самый простой и понятный. Минимум кода, отлично работает при наличии аппаратного ускорения (что для современных устройств — стандарт).
BlurMaskFilter — второй по простоте, чуть больше кода, работает также отлично.
ScriptIntrinsicBlur — пожалуй, еще сложнее, также смущает статус Deprecated и рекомендации по миграции.
Есть еще экзотический способ, у меня он не завелся, и я так до конца и не понял, как это работает. Если заведете и разберетесь, напишите в комментариях.
Раскрывать эти пункты не вижу смысла. Есть масса статей с примерами, в частности, вот эта. Для себя решил взять самый простой способ. Если что-то пойдет не так, можно попробовать следующий.
Анализ требований
Допустим, со способом определились. Теперь сформулируем, что в итоге хотим получить. В идеальном мире это должно быть также удобно, как указать elevation .
Размер тени не должен влиять на размер и позицию View на экране. Представляете, каково подбирать отступы или центрировать View , на размеры которой влияет отбрасываемая ей тень? Наличие тени не должно влиять на верстку существующих экранов.
Кроме того, должна быть возможность указать параметры тени в XML (в верстке или в стиле) и, что немаловажно, увидеть результат в превью Android Studio.
Еще нужно уметь отрисовать тень у любых View , вне зависимости от того, есть ли у них фон или elevation . И совсем хорошо, если время отрисовки не будет занимать весь фрейм.
Также определимся, что тень у нас отбрасывает только простая форма: прямоугольник (со скругленными углами или без), овал, и возможно модный squircle, если не удастся отговорить дизайнеров.
Суммарно все это звучит, как необходимость наследоваться от нужных View и расширять их функционал. При этом логику построения и отрисовки тени можно вынести в общий вспомогательный класс. Так реализация тени в компонентах превратится в тривиальную задачу.
Создадим Drawable , умеющий рисовать тень определенной формы.
Напишем View , использующий этот Drawable .
Измерим производительность решения.
NinePatchDrawable
В одной замечательной статье про тени на Android от этой идеи отказались. Статья действительно замечательная, но почему-то не попалась мне на глаза в тот момент, когда я искал решение.
Итак, что такое 9-patch и зачем он нужен? Тут мне, как старому разработчику игр на Marcomedia Flash (да упокой Господь его душу вместе с душой Стива), нужно смахнуть ностальгическую слезу. Эту технику я впервые повстречал там, а «Википедия» утверждает, что именно там она впервые и была придумана.
Суть данного метода заключается в том, чтобы поделить растровое изображение на 9 частей, и при изменении размеров растягивать все области, кроме углов. Так совсем небольшое исходное изображение можно растягивать до произвольных размера без искажений и потери качества.
Таким образом, экономится и память (размер Bitmap минимален), и процессорное время (отдать Bitmap на отрисовку почти ничего не стоит). Ну а GPU только дай Bitmap порисовать.
К счастью, Android дает возможность разработчикам создавать NinePatchDrawable программно. А поскольку и форма фигуры и параметры тени известны — задача тривиальная.
Реализация
Определим параметры и форму тени:
Для построения формы было решено использовать ShapeAppearanceModel, а также ShapeAppearancePathProvider, который на основе этой модели построит Path, используемый для конечной отрисовки.
В коде это выглядит так:
Форма есть, теперь посчитаем, сколько займет тень — радиус тени плюс смещение. Есть еще параметр SHADOW_SPREAD_MULTIPLIER , чуть увеличивающий область для того, чтобы все непрозрачные пиксели поместились в итоговый Bitmap .
Минимально необходимый же размер Bitmap считается как радиусы скругления углов формы плюс размер самой тени. Границы 9.patch тоже считаются тривиально.
Приступим к отрисовке. Мы используем Paint.setShadowLayer и после вырезаем форму, оставляя земле лишь тень на случай, если элемент с тенью решит стать полупрозрачным.
На выходе получаем такую аккуратную картинку. Зелеными линиями на ней показана сетка, в соответствии с которой будет происходить растяжение. C помощью этой Bitmap можно отрисовать форму любого размера с тенью S и углами 16dp.
Bitmap для NinePatchDrawable
Остается лишь «запечатать» ее в NinePatchDrawable . API не самый простой, но StackOverflow не бросит в трудную минуту.
Использование
Поместив всю реализацию в класс ShadowRenderer на 200 строк, можем создать ShadowView и попробовать его в действии. Тут нужно обратить внимание на три момента.
Во-первых, придется отключить outlineProvider для того, чтобы убрать нативную тень, которую дает elevation. Сам elevation мы хотим сохранить по понятным причинам. К тому же, outlineProvider не позволит нам нарисовать тень за пределами собственных границ ShadowView , если вдруг включить clipToOutline .
Во-вторых, нужно отключить clipChildren у родительского контейнера — тень мы хотим снаружи, а не внутри границ View .
Тень обрезается границами View
Третий момент обнаружился, когда я попробовал применить к ShadowView полупрозрачность (для наглядности сделаю тень красной).
Оказалось, что при alpha меньше единицы клиппинг у View включается автоматически, обрезая тень. Но тут я отделался легким испугом. Достаточно было прочитать документацию к методу View.setAlpha и опять обрести душевный покой.
Starting with Build.VERSION_CODES.M , setting a translucent alpha value will clip a View to its bounds, unless the View returns false from hasOverlappingRendering() .
Посмотрим на наш ShadowView . За минусом конфигурации получаем 3 метода.
Конечно, методов там чуть больше. Есть еще автоматическое отключение chipChildren у контейнера, отключение outlineProvider , установка параметров тени из стиля/программно — все то, что мы с вами так любим писать в кастомных вьюшках. Но в действительности процесс создания компонента с тенью выглядит просто.
Производительность
Я был практически уверен, что в этом отношении проблем не возникнет по причинам, описанным выше. Так и произошло.
Время отрисовки кадра — 1 миллисекунда
Сценарий тот же самый, что и с MaterialShapeDrawable : один ShadowView на экране и аниматор, меняющий его размеры.
Естественно, процесс создания Bitmap тоже не бесплатен, но визуально в трейсе найти его не удалось — все фреймы коротенькие и ровненькие, как на подбор. Ставить в код метку для трейса и выяснять точное количество миллисекунд было уже лень.
Но есть и ложка дегтя. Поскольку у объектов круглой формы скругления углов зависят от ширины или высоты, то изменение размера влечет за собой пересоздание Bitmap и NinePatchDrawable . Тогда картина заметно ухудшается, в районе 20мс на фрейм.
Вариантов решения два. Первый — пропускать генерацию Bitmap и рисовать тень на канвасе с помощью Paint напрямую в каждом вызове draw . Второй — указать большие значения радиуса углов, достаточные для отрисовки овала. Так получим большую исходную Bitmap , но зато отрисовка останется мгновенной.
Можно еще улучшить производительность, использовав LruCache. Разновидностей тени у нас всего 3, форм тоже немного. Поэтому хранение и использование уже сгенерированных Bitmap повторно реализовать достаточно просто. Но до этого еще не дошли руки, да и пока не было необходимости.
Заключение
Стоила ли игра свеч? Определенно да. Тени стали выглядеть гораздо лучше, чем стандартный elevation .
Можно ли использовать стандартный elevation ? Тоже да, но лучше избегать больших значений. Настройки прозрачности могут дать неплохие результаты.
Нужно ли писать свое собственное решение, когда есть много библиотек? Думаю, тоже да. Так вы получите именно то, что нужно вам. Тем более, Android почти все дает из коробки, поэтому решение получится компактным.