플로팅 액션 버튼 (패브)의 아이콘 크기 조정

플로팅 액션 버튼 (패브)의 아이콘 크기 조정

---

새로운 플로팅 액션 버튼은 56dp x 56dp이어야 하고 그 안에있는 아이콘은 24dp x 24dp이어야 합니다. 따라서 icon과 button 사이의 간격은 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

---

As your content is 24dp x 24dp you should use 24dp icon. And then set android:scaleType="center" in your ImageButton to avoid auto resize.

---

Make this entry in dimens

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

Here 36dp is icon size on floating point button. This will set 36dp size for all icons for floating action button.

Updates As Per Comments

If you want to set icon size to particular Floating Action Button just go with Floating action button attributes like app:fabSize="normal" and 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"

---

Try to use app:maxImageSize="56dp" instead of the above answers after you update your support library to v28.0.0

---

The design guidelines defines two sizes and unless there is a strong reason to deviate from using either, the size can be controlled with the fabSize XML attribute of the FloatingActionButton component.

Consider specifying using either app:fabSize="normal" or app:fabSize="mini", e.g.:

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

---

There are three key XML attributes for custom FABs:

• app:fabSize: Either "mini" (40dp), "normal"(56dp)(default) or "auto"
• app:fabCustomSize: This will decide the overall FAB size.
• app:maxImageSize: This will decide the icon size.

---

Example:

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

The FAB padding (the space between the icon and the background circle, aka ripple) is calculated implicitly by:

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

---

Note that the margins of the fab can be set by the usual android:margin xml tag properties.

---

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

With the background you provided it results in below button on my device (Nexus 7 2012)

Looks good to me.

---

What's your goal?

If set icon image size to bigger one:

1. Make sure to have a bigger image size than your target size (so you can set max image size for your icon)

2. My target icon image size is 84dp & fab size is 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" />
   

---

As FAB is like ImageView so You can use scaleType attribute to change the icon size likewise ImageView. Default scaleType for a FAB is fitCenter. You can use center and centerInside to make icon small and large respectively.

All values for scaleType attribute are - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY and matrix.

See https://developer.android.com/reference/android/widget/ImageView.ScaleType.html for more details.

---

If you are using androidx 1.0.0 and are using a custom fab size, you will have to specify the custom size using

app:fabCustomSize="your custom size in dp"

deafult에 의해 크기는 56dp이고 작은 크기의 팹은 40dp 인 또 다른 변형이 있습니다. 다른 것을 사용하는 경우 패딩이 올바르게 계산되도록 지정해야합니다

---

벡터 드로어 블 설정에서 @IRadha의 답변에서 벗어나 android:height="_dp"스케일 크기를 android:scaleType="center"설정하여 드로어 블을 설정된 크기로 설정하십시오.

---

다음과 같은 FloatingActionButton 설정 : android : scaleType 및 app : maxImageSize로 재생할 수 있습니다. 나에 관해서는 android : scaleType = "centerInside"및 app : maxImageSize = "56dp"인 경우 바람직한 결과를 얻었습니다.

참고 URL : https://stackoverflow.com/questions/27484126/adjust-icon-size-of-floating-action-button-fab