フローティングアクションボタンのアイコンサイズを調整する(fab)


172

フローティングボタン 新しいフローティングアクションボタンは56dp x 56dpで、その中のアイコンは24dp x 24dpである必要があります。したがって、アイコンとボタンの間のスペースは16 dpにする必要があります。

<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



@InsaneCatたぶんあなたが言った質問は私のものより新しいので逆かもしれません。
vovahost

回答:


184

コンテンツは24 dp x 24 dpなので、24 dpアイコンを使用する必要があります。そしてandroid:scaleType="center"、ImageButtonで設定して、自動サイズ変更を回避します。


たとえば、drawable-hdpiフォルダーに_18dp.png、_24dp.png、_36dp.png、_48dp.png画像がある理由を説明またはドロップできますか。
vovahost 2014

質問が理解できません。サイズが異なる画像には18 dp、24 dp、36 dp、48 dpがあります。
ガエタンM.

48px x 48pxであったhdpiフォルダーにアイコンの1つのバリアントしかなかった古いAndroid_Design_Iconsを覚えていますか。hdpiフォルダーに、同じアイコンに対して4つの異なる解像度(27px x 27px、36px x 36px、54px x 54px、72px x 72px)があるのはなぜですか?
vovahost

1
あなたがattribut scaleTypeを持っているので、のImageButtonはImageViewのサブクラスで、デフォルトscaleTypeがあるScaleType.FIT_CENTER
ガエタンM.

4
com.android.support:support-v4:28.0.0-rc01で動作しなくなりました
StarWind0

116

dimensでこのエントリを作成します

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

ここで36 dpは、浮動小数点ボタンのアイコンサイズです。これにより、フローティングアクションボタンのすべてのアイコンに36 dpのサイズが設定されます。

コメントごとの更新

アイコンサイズを特定のフローティングアクションボタンに設定する場合は、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 2016

1
はい。github.com/Clans/FloatingActionButtonでは機能しません。androids FloatingActionButtonを使用しているときに機能します
Abhishek

2
うん、でもアプリ全体でやりたくない!
StarWind0

@ StarWind0単一のフローティングアクションボタンに適用する場合は、fabSize属性とscaleType属性を使用する必要があります。回答を更新しました。
アビシェク2017

110

app:maxImageSize="56dp"サポートライブラリをv28.0.0に更新した後、上記の回答の代わりに使用してみてください


1
いずれにせよ、28.0.0バージョンではこれを取得せず、androidxで取得します。
ケムラジ2018

1
私はAndroidXに切り替えていません。これは私が使用しているものです:api 'com.android.support:design:28.0.0'
Robin

3
これは私にとってはうまくいきましたmaxIconSizeが、なぜを定義するとアイコンのサイズが変わるのかを理解するためにもっと情報が欲しいのです。
ストラミン

45

カスタムFABには、3つの主要なXML属性があります。

  • app:fabSize:「ミニ」(40 dp)、「ノーマル」(56 dp)(デフォルト)、 または「オート」のいずれか
  • app:fabCustomSize:これにより、FAB全体のサイズが決まります。
  • app:maxImageSize:アイコンのサイズを決定します。

例:

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

FABパディング(アイコンと背景の円の間のスペース、別名リップル)は、次のように暗黙的に計算されます。

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

fabのマージンは通常のandroid:marginxmlタグプロパティで設定できることに注意してください。


27

設計ガイドラインでは2つのサイズを定義しており、いずれかを使用することから逸脱する大きな理由がない限り、サイズfabSizeFloatingActionButtonコンポーネントのXML属性で制御できます。

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
パディングを設定しましたが、何もしません。そして、正しいパディングは32 dpではなく16 dpになります
vovahost '15

10

あなたの目標は何ですか?

アイコン画像のサイズを大きくする場合:

  1. 目標サイズよりも大きな画像サイズにしてください (so you can set max image size for your icon)

  2. 私のターゲットアイコン画像のサイズは84 dpで、 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" />

6

androidx 1.0.0を使用しており、カスタムfabサイズを使用している場合は、次を使用してカスタムサイズを指定する必要があります。

app:fabCustomSize="your custom size in dp"

デフォルトでは、サイズは56 dpであり、40 dpの小さなサイズのファブである別のバリ​​エーションがあります。何かを使用している場合は、パディングが正しく計算されるように指定する必要があります。


これがまさに私が探していたものです!layout_widthand を設定する必要さえありませんlayout_height。うまくいきます。これも利用可能com.android.support:design:28.0.0
PNDA

4

FABのようなものですImageViewあなたが使用できるように、scaleType同様にアイコンのサイズを変更する属性をImageViewscaleTypeaのデフォルトFABfitCenterです。とを使用centercenterInsideて、アイコンをそれぞれ小さく、大きくできます。

scaleType属性のすべての値は- center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYおよびmatrixです。

詳細については、https://developer.android.com/reference/android/widget/ImageView.ScaleType.htmlを参照してください。


3

ベクトルドローアブル設定での@IRadhaの答えと、ドローアブルを設定 されたサイズに設定するようにandroid:height="_dp" スケールタイプをandroid:scaleType="center"設定


2

FloatingActionButtonの次の設定で遊ぶことができます:android:scaleTypeおよびapp:maxImageSize。私としては、android:scaleType = "centerInside"とapp:maxImageSize = "56dp"の場合に望ましい結果が得られます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.