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 (справа):

dZSVM.png 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" />