web-dev-qa-db-ja.com

フローティングアクションボタン（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

androidandroid-layoutandroid-drawablefloating-action-buttonandroid-icons
142
vovahost

あなたのコンテンツは24dp x 24dpなので、 24dpアイコン を使うべきです。そして、自動リサイズを避けるためにImageButtonにAndroid:scaleType="center"を設定してください。

177
Gaëtan M.

このエントリをdimenにする

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

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

55
Robin

設計ガイドラインでは2つのサイズを定義しており、どちらかを使用することから逸脱する強力な理由がない限り、サイズはfabSizeコンポーネントのFloatingActionButton 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" />
26
Cristian Almstrand
<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

は、私にはよく見えますよ。

15
Chris K.

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

アイコンの画像サイズを大きくすると、次のようになります。

  1. ターゲットサイズより大きな画像サイズを必ず使用してください(so you can set max image size for your icon)

  2. 私のターゲットアイコンの画像サイズは84dpで、工場サイズは112dpです。

    <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
Shem Alexis Chavez

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

  • 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タグのプロパティで設定できることに注意してください。

6
varun

あなたがandroidx 1.0.0を使用していて、カスタムファブサイズを使用している場合、あなたはカスタムサイズを指定する必要があります。

app:fabCustomSize="your custom size in dp"

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

4
Suhaib Roomy

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 を参照してください。

4
lRadha

ベクトル描画可能設定Android:height="_dp"およびスケールタイプをAndroid:scaleType="center"に設定したときの@ IRadhaの回答を無視

3
Daniel Dube

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

1
Andrew Glukhoff