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

Floating button Новая кнопка плавающего действия должна быть 56dp x 56dp и значок внутри он должен быть!--4-->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-иконки-1.0.0contentdrawable-hdpiic_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

8 ответов


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


сделайте эту запись в dimens

<!--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"

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


<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

выглядит хорошо для меня.


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


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

все значения - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY и matrix.

см.https://developer.android.com/reference/android/widget/ImageView.ScaleType.html для получения более подробной информации.


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


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

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

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

  2. размер изображения моего целевого значка - 84dp & fab размер 112 DP:

    <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" />