Android: создайте большую плавучую кнопку действия с большим значком
Я хочу создать большую плавучую кнопку действия (FAB), большую, чем обычная 56 дп, с большим значком внутри.
(Для моей цели значок никогда не будет понятным, поэтому я создам png файл, содержащий короткий текст, и использую этот значок в качестве значка.)
Увеличение размера FAB отлично работает:
поскольку я не использую mini-FloatingActionButton, я переопределял размер мини-кнопки.
в моем layout-xml я указываю:
<android.support.design.widget.FloatingActionButton
...
app:fabSize="mini"
....
и в dimension.xml я переопределяю размер для мини-fab:
<dimen name="fab_size_mini">80dp</dimen>
Однако мне не удалось получить большую иконку в FAB.
Я пробовал значки с разными dp из библиотеки значков материалов - никаких успехов. Кроме того, настройка отладки в макете FAB не работала.
Любые предложения? Спасибо!
Ответы
Ответ 1
Вы можете попытаться переопределить максимальный размер размера изображения в вашем dimensions.xml
:
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
<dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>
Обязательно убедитесь, что вы переопределяете исходные ресурсы в Библиотеке дизайна. Попробуйте design_fab_image_size
вместо design_fab_content_size
, если это не работает для вас.
Используйте с осторожностью, поскольку это взломать не настоящее решение. Решение может не работать, если имя ресурса изменено в будущей версии библиотеки Design Library. Мое мнение состоит в том, чтобы придерживаться размера, который определяется в Библиотеке Дизайна, поскольку это рекомендуемое руководство по дизайну, основанное на Material Design, которое делает ваше общее приложение хорошим.
Ответ 2
Я наткнулся на это, а затем нашел ответ через пробную версию и ошибку. Кажется, что вы можете увеличить размер кнопки плавающего действия, если вы установите как layout:width
, так и layout:height
на match_parent
и оберните кнопку плавающего действия в FrameLayout (не обязательно, но имеет смысл, так как вы 'только для того, чтобы установить размер кнопки).
Затем установите ширину и высоту FrameLayout в соответствии с тем, что вы хотите.
Я поддержал ответ Grace Coder, потому что он, безусловно, решает проблему, но я думал, что этот метод будет более безопасным и, возможно, более желательным.
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/chronometer"
android:layout_centerHorizontal="true">
<android.support.design.widget.FloatingActionButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/chronometer"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
android:clickable="true"
android:src="@android:drawable/ic_btn_speak_now"
android:id="@+id/record_fab" />
</FrameLayout>
Вы можете увидеть разницу в этом скриншоте, который я взял:
![введите описание изображения здесь]()
Верхний FAB использует мой код/обходной путь, тогда как нижний FAB использует стандартные (в основном неизменные) размеры.
Ответ 3
Начиная с библиотеки поддержки проектирования 27.1.0, существует официальный способ установить пользовательский размер FAB: app:fabCustomSize
атрибут XML и соответствующий метод setCustomSize
. Для увеличения размера иконки вы можете использовать android:scaleType="center"
и увеличить рисунок. ОБНОВЛЕНИЕ: android:scaleType
теперь не работает, вместо этого используйте fab.setScaleType(ImageView.ScaleType.CENTER)
.
Другие предлагаемые решения имеют некоторые недостатки:
- Переопределение размеров FAB по умолчанию не может быть применено к одной кнопке и, по сути, является хаком (используется непубличный API, который может быть изменен).
- Обтекание FAB в FrameLayout (или просто установка FAB
layout_width
и layout_height
на желаемый размер, что имеет тот же эффект) выглядит ужасно на устройствах до Lollipop. ОБНОВЛЕНИЕ: теперь и после Lollipop (см. Скриншоты ниже). - Настройка
scaleX
и scaleY
требует настройки полей (поскольку визуальный размер FAB теперь не соответствует размеру макета) и масштабирует немасштабируемые части: границу кнопки и (до леденца) ширину тени.
Пример макета в соответствии с API 19 (слева) и API 21 (справа):
![iab3t.png]()
Ответ 4
Просто разъясняя @GraceCoder ответ, что @Tim Castelijns хорошо отметил в комментарии выше
Вы должны перейти в файл res- > values- > dimensions.xml
![введите описание изображения здесь]()
и измените его, чтобы добавить
<dimen name="design_fab_size" tools:override="true">100dp</dimen>
<dimen name="design_fab_content_size" tools:override="true">98dp</dimen>
Внимание:
design_fab_size
не
design_fab_size_mini
Ответ 5
<dimen name="design_fab_size_mini" tools:override="true">120dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">150dp</dimen>
Ответ 6
В предварительном просмотре Android P соответствие FAB его родительского размера перестало работать для меня, так как значок перестал масштабироваться, делая его слишком маленьким и отклоняющимся от центра.
Самый простой метод, который я нашел в качестве замены, - это поместить FAB в FrameLayout, установить справедливое поле для FAB, чтобы тень не обрезалась (я использовал 10dp), установить оба размера wrap_content
, а затем добавить scaleX
и scaleY
в FrameLayout.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="1.6"
android:scaleY="1.6">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:src="@drawable/ic_send_white_24dp" />
</FrameLayout>
Это работает, как и ожидалось, позволяет легко масштабировать на определенные суммы и не влияет на другие кнопки с плавающим действием.
Ответ 7
Теперь вы можете легко настроить размер, просто добавив
app:fabCustomSize="32dp"
лайк
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_main_unlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_margin="@dimen/margin_normal"
android:src="@drawable/ic_unlock"
android:visibility="gone"
app:backgroundTint="@color/colorPrimary"
app:fabCustomSize="@dimen/margin_very_massive"
tools:visibility="visible" />