Как добавить тень в FAB, предоставленную библиотекой дизайна поддержки Android?

Название довольно самоочевидно.

Следующий код не отображает тень под плавающей кнопкой действия. Что можно сделать, чтобы отрисовать тень? Эта функция действительно не поддерживается даже в API 21+?

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_add"
    android:clickable="true" />

Примечание. Добавление android:elevation не добавляет тени в API 21.

Пример скриншота

Снимок экрана из примера dandar3: https://github.com/dandar3/android-support-design


android floating-action-button android-appcompat android-design-library
person Rolf ツ    schedule 29.05.2015    source источник
comment
По крайней мере, для 21+ это может применяться: stackoverflow.com/questions/27080338/   -  person CommonsWare    schedule 29.05.2015
comment
Что-то я подумал, но удаление StateListAnimator не возвращает тень. Это может быть связано с тем, что FAB на самом деле является расширенным ImageView, а не кнопкой. Странно, потому что в FAB действительно есть StateListAnimator.   -  person Rolf ツ    schedule 29.05.2015

Ответы (6)


arrow_upward
92
arrow_downward

Простая настройка app:borderWidth="0dp" решает эту проблему для меня.

Примечание. не забудьте добавить xmlns:app="http://schemas.android.com/apk/res-auto" к корневому макету.

Эта проблема должна быть исправлена ​​в следующем выпуске библиотеки дизайна Android.

person Dmytro Danylyk    schedule 29.05.2015
comment
Вау, это действительно работает... странное поведение. Я не могу представить, что это ожидаемое поведение. - person Rolf ツ; 30.05.2015
comment
@Thorinside это ошибка, квадратная ошибка: code.google.com/ p/android/issues/detail?id=175067 - person Dmytro Danylyk; 02.06.2015

arrow_upward
33
arrow_downward

Для API 21+ необходимо установить app:borderWidth="0dp" и app:elevation="[number]dp". Устанавливая высоту, вы задаете размер тени, который хотите:

Пример значений параметра повышения

Вот пример кода для API 21+:

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/locate_user_FAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    android:layout_above="@+id/take_taxi_FAB"
    app:backgroundTint="@color/colorAccentGrey">

Одна важная вещь, которую следует помнить для API ниже 21 (Android 4), заключается в том, что с точки зрения совместимости FAB поместит поля вокруг вашей кнопки, чтобы нарисовать тень. Затем вы должны сделать что-то подобное (в настоящее время я использую этот код и работает):

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/locate_user_FAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    android:layout_above="@+id/take_taxi_FAB"
    android:layout_alignParentRight="true"
    android:layout_marginRight="@dimen/map_FAB_marginRight"
    android:layout_marginBottom="@dimen/locate_user_FAB_marginBottom"
    app:backgroundTint="@color/colorAccentGrey">

Я предпочитаю ставить xmlns:app="http://schemas.android.com/apk/res-auto" в начале XML, но я поставил его просто для того, чтобы напомнить вам ;]

person j_gonfer    schedule 10.06.2015
comment
Не работает для меня. Я устанавливаю FAB над представлением карты, и чертова тень не появляется на моем FAB. - person Terranology; 20.05.2018

arrow_upward
6
arrow_downward

У меня была такая же проблема, и я заставил ее работать, удалив этот тег из моего AndroidManifest.xml.

android:hardwareAccelerated="false"

Сначала я добавил его вместе с android:largeHeap="true", потому что думал, что он нужен для тепловой карты, в которой показано большое количество точек, но потом понял, что это может работать только с android:largeHeap="true".

person Tragalunas    schedule 13.03.2017

arrow_upward
5
arrow_downward

Если это все еще не работает для некоторых, существует значительная разница между:

app:elevation="6dp"
app:borderWidth="0dp"

и

app:borderWidth="0dp"
app:elevation="6dp"

По какой-то причине кажется, что порядок имеет значение (первый порядок работает, второй нет), и это из библиотеки поддержки 23.3.0.

person Community    schedule 10.05.2016

arrow_upward
5
arrow_downward

Проверьте манифест в проекте или библиотеках в теге приложения и удалите их

android:hardwareAccelerated="false"
android:largeHeap="true"

Но если вам нужны эти опции, то тени и анимация трансформаций работать не будут.

person PanCrucian    schedule 16.12.2016

arrow_upward
0
arrow_downward

В случае, если это поможет, я использовал

android:tint="@color/myColor"

вместо

android:backgroundTint="@color/myColor".

Замена оттенка на backgroundTint вернула тень.

person narko    schedule 09.09.2018