태그 보관물: floating-action-button

floating-action-button

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

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