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

새로운 플로팅 액션 버튼은 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

콘텐츠가 24dp x 24dp 이므로 24dp icon을 사용해야 합니다 . 그런 다음 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"

app:maxImageSize="56dp"지원 라이브러리를 v28.0.0으로 업데이트 한 후 위의 답변 대신 사용 하십시오

사용자 지정 FAB에는 세 가지 주요 XML 특성이 있습니다.

• app:fabSize: "mini"(40dp), "normal"(56dp) (기본값) 또는 "auto"
• app:fabCustomSize: 전체 FAB 크기가 결정됩니다.
• app:maxImageSize: 아이콘 크기가 결정됩니다.

예:

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

FAB 패딩 (아이콘과 배경 원 사이의 공간, 즉 ripple )은 다음과 같이 암시 적 으로 계산 됩니다.

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

fab의 여백은 일반적인 android:marginxml 태그 속성 으로 설정할 수 있습니다 .

디자인 가이드 라인은 두 가지 크기를 정의하며, 둘 중 하나를 사용하지 않을 이유가 없다면, 크기는 fabSizeXML 속성 으로 제어 할 수 있습니다 .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" />

<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)

나에게 좋아 보인다.

당신의 목표는 무엇입니까?

아이콘 이미지 크기를 더 크게 설정 한 경우 :

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

androidx 1.0.0을 사용하고 있고 사용자 정의 팹 크기를 사용하는 경우 다음을 사용하여 사용자 정의 크기를 지정해야합니다

app:fabCustomSize="your custom size in dp"

deafult에 의해 크기는 56dp이고 작은 크기의 fab 인 40dp 인 또 다른 변형이 있습니다.

으로는 FAB같다 ImageView당신이 사용할 수 있도록 scaleType마찬가지로 아이콘 크기를 변경하려면 속성을 ImageView. 기본 scaleTypeA의가 FAB있다 fitCenter. 당신은 사용할 수 있습니다 center및 centerInside각각 크고 작은 아이콘을 만들 수 있습니다.

scaleTypeattribute의 모든 값 은- center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY및 matrix입니다.

자세한 내용은 https://developer.android.com/reference/android/widget/ImageView.ScaleType.html 을 참조하십시오.

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

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