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

172

Плавающая кнопка Новая плавающая кнопка действия должна быть 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>

И вот результат, который я получаю:
Результат с плавающей кнопкой
я использовал значок из \ 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

vovahost
источник
Возможная
копия
@InsaneCat Может быть, наоборот, потому что вопрос, который вы упомянули, более свежий, чем мой.
vovahost

Ответы:

184

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

Гаэтан М.
источник
Можете ли вы объяснить или отбросить ссылку на какой-нибудь сайт, почему, например, в папке drawable-hdpi находятся изображения _18dp.png, _24dp.png, _36dp.png, _48dp.png.
vovahost
Я не понимаю ваш вопрос, есть 18dp, 24dp, 36dp и 48dp для изображений разного размера.
Гаэтан М.
Вы помните старые Android_Design_Icons, у которых был только один вариант значка в папке hdpi, который был 48px x 48px. Почему сейчас в папке hdpi есть 4 разных разрешения для одного и того же значка, т.е. 27px x 27 px, 36px x 36px, 54px x 54px, 72px x 72px?
vovahost
1
ImageButton является подклассом ImageView, поэтому у вас есть атрибут scaleType и по умолчанию ScaleType ScaleType.FIT_CENTER
Gaëtan M.
4
Больше не работает с com.android.support:support-v4:28.0.0-rc01
StarWind0
116

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

<!--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
Это как раз то, что мне было нужно - просто и легко. Спасибо за публикацию.
Blisterpeanuts
1
Да. Это не работает с github.com/Clans/FloatingActionButton . Это работает, когда вы используете Android FloatingActionButton
Abhishek
2
Да, но я не хочу делать это через приложение!
StarWind0
@ StarWind0 Если вы хотите применить одну кнопку с плавающим действием, вы должны использовать атрибуты fabSize и scaleType. Я обновил свой ответ.
Абхишек
110

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

Робин
источник
1
В любом случае, вы не получите это в версии 28.0.0, вы получите это в androidx.
Хемрай
1
Я не переключился на AndroidX, это то, что я использую: api 'com.android.support:design:28.0.0'
Robin
3
Это сработало для меня, но я хотел бы получить больше информации, чтобы понять, почему определение maxIconSizeизменения размера значка.
страмин
45

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

  • app:fabSize: Либо «мини» (40 дп), «нормальный» (56 дп) (по умолчанию), либо «авто»
  • app:fabCustomSize: Это будет определять общий размер FAB.
  • app:maxImageSize: Это будет определять размер значка.

Пример:

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

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

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

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

Варуна
источник
27

В рекомендациях по проектированию определены два размера, и если нет веских причин для отклонения от одного из них, размер можно контролировать с помощью 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" />
Кристиан Альмстранд
источник
15
<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)

введите описание изображения здесь

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

Крис К.
источник
7
Я установил отступ, но он ничего не делает. И правильный отступ будет 16 dp, а не 32dp
vovahost
10

Какова твоя цель?

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

  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, если вы используете что-либо, вам нужно будет указать его для правильного расчета заполнения.

Suhaib Roomy
источник
Это именно то, что я искал! Вам даже не нужно устанавливать layout_widthи layout_height. Это просто работает. Это также доступно наcom.android.support:design:28.0.0
PNDA
4

Как 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 для получения дополнительной информации.

lRadha
источник
3

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

Даниэль Дубе
источник
2

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

Андрей Глухов
источник