Отрегулируйте размер значка кнопки плавающего действия (fab)

Floating button Новая кнопка плавающего действия должна быть 56dp x 56dp, а значок внутри нее должен быть 24dp x 24dp. Таким образом, пространство между значком и кнопкой должно быть 16dp.

<ImageButton
    android:id="@+id/fab_add"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:background="@drawable/ripple_oval"
    android:elevation="8dp"
    android:src="@drawable/ic_add_black_48dp" />

ripple_oval.xml   

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

И вот в результате я получаю:
Floating button result
Я использовал значок из \material-design-icons-1.0.0\content\drawable-hdpi\ic_add_black_48dp.png
https://github.com/google/material-design-icons/releases/tag/1.0.1

Как сделать размер значка внутри кнопки точно, как описано в руководстве?

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

Ответы

Ответ 1

Поскольку ваш контент 24dp x 24dp, вы должны использовать 24dp значок. А затем установите android:scaleType="center" в свой ImageButton, чтобы избежать автоматического изменения размера.

Ответ 2

Сделайте эту запись в размерах

<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>

Здесь 36dp - размер иконки на кнопке с плавающей запятой. Это установит размер 36dp для всех значков для плавающей кнопки действия.

Обновления в соответствии с комментариями

Если вы хотите установить размер иконки для определенной кнопки с плавающим действием, просто используйте атрибуты кнопки с плавающим действием, такие как app: fabSize = "normal" и android: scaleType = "center".

  <!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need-->
  app:fabSize="normal" 

  <!--android:scaleType decides how the icon drawable will be scaled on Floating action button. You can use center(to show scr image as original), fitXY, centerCrop, fitCenter, fitEnd, fitStart, centerInside.-->
  android:scaleType="center"

Ответ 3

Попробуйте использовать app:maxImageSize="56dp" вместо приведенных выше ответов после обновления библиотеки поддержки до версии 28.0.0.

Ответ 4

Руководства по проектированию определяют два размера и, если нет веских причин отклоняться от использования либо, размер можно контролировать с помощью атрибута fabSize XML компонента FloatingActionButton.

Рассмотрим задание с помощью либо app:fabSize="normal", либо app:fabSize="mini", например:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_done_white_24px"
   app:fabSize="mini" />

Ответ 5

<ImageButton
        android:background="@drawable/action_button_bg"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:padding="16dp"
        android:src="@drawable/ic_add_black_48dp"
        android:scaleType="fitXY"
        android:elevation="8dp"/>

При условии, что вы предоставили ему результат ниже на моем устройстве (Nexus 7 2012)

enter image description here

Выглядит хорошо.

Ответ 6

Какова ваша цель?

Если установить размер изображения значка больше:

  1. Убедитесь, что размер изображения больше целевого (so you can set max image size for your icon)

  2. Размер моей целевой иконки - 84 дп, а размер потрясающего - 112 дп:

    <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src= <image here>
    app:fabCustomSize="112dp"
    app:fabSize="auto"
    app:maxImageSize="84dp" />

Ответ 7

Если вы используете androidx 1.0.0 и используете нестандартный размер, вам нужно будет указать нестандартный размер, используя

app:fabCustomSize="your custom size in dp"

По умолчанию размер равен 56 dp, и есть еще один вариант, который представляет собой небольшой размер fab, равный 40 dp, если вы используете что-либо, вам нужно будет указать его для правильного расчета заполнения.

Ответ 8

Как FAB как ImageView, поэтому вы можете использовать атрибут scaleType, чтобы изменить размер значка аналогично ImageView. Значение по умолчанию scaleType для FAB равно fitCenter. Вы можете использовать center и centerInside, чтобы сделать значок маленьким и большим соответственно.

Все значения для атрибута scaleType: - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY и matrix.

Подробнее см. https://developer.android.com/reference/android/widget/ImageView.ScaleType.html.

Ответ 9

отключение @IRadha ответа в векторной рисованной настройке android:height="_dp" и установке типа масштаба на android:scaleType="center" устанавливает рисование любого размера, который был установлен

Ответ 10

Вы можете играть со следующими настройками FloatingActionButton: android: scaleType и app: maxImageSize. Что касается меня, я получил желаемый результат, если android: scaleType = "centerInside" и app: maxImageSize = "56dp".

Ответ 11

Есть три ключевых атрибута XML для пользовательских FAB:

  • app:fabSize: "mini" (40dp), "normal" (56dp) (по умолчанию) или "auto"
  • app:fabCustomSize: это будет определять общий размер FAB.
  • app:maxImageSize: это будет определять размер значка.

Пример:

app:fabCustomSize="64dp" 
app:maxImageSize="32dp"

Заполнение FAB (пространство между значком и фоновым кругом, или пульсацией) неявно вычисляется по формуле:

4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16

Обратите внимание, что поля fab могут быть установлены обычными свойствами тега android:margin xml.