Dostosuj rozmiar ikony pływającego przycisku akcji (fab)

Nowy pływający przycisk akcji powinien mieć rozmiar 56 dp x 56 dp, a ikona wewnątrz niego powinna mieć 24 dp x 24 dp . Zatem odstęp między ikoną a przyciskiem powinien wynosić 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>

I oto wynik jaki otrzymuję:

użyłem ikony z \ 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

Jak sprawić, aby rozmiar ikony wewnątrz przycisku był dokładnie taki, jak opisano w wytycznych?

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

Ponieważ Twoja treść ma rozmiar 24 x 24 dp, powinieneś użyć ikony 24 dp . A następnie ustaw android:scaleType="center"w swoim ImageButton, aby uniknąć automatycznej zmiany rozmiaru.

Wprowadź ten wpis w wymiarach

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

Tutaj 36dp to rozmiar ikony przycisku zmiennoprzecinkowego. Spowoduje to ustawienie rozmiaru 36 dp dla wszystkich ikon dla pływającego przycisku akcji.

Aktualizacje według komentarzy

Jeśli chcesz ustawić rozmiar ikony na konkretny pływający przycisk akcji, po prostu użyj atrybutów pływającego przycisku akcji, takich jak app: fabSize = "normal" i 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"

Spróbuj użyć app:maxImageSize="56dp"zamiast powyższych odpowiedzi po zaktualizowaniu biblioteki pomocy technicznej do wersji 28.0.0

Istnieją trzy kluczowe atrybuty XML dla niestandardowych FAB:

• app:fabSize: „Mini” (40 dp), „normalny” (56 dp) (domyślnie) lub „auto”
• app:fabCustomSize: To zadecyduje o całkowitym rozmiarze FAB.
• app:maxImageSize: To zadecyduje o rozmiarze ikony.

Przykład:

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

Wypełnienie FAB (odstęp między ikoną a kółkiem tła, inaczej tętnienie ) jest obliczane niejawnie przez:

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

Zauważ, że marginesy fab można ustawić za pomocą zwykłych android:marginwłaściwości znacznika xml.

Wytyczne projektowe definiują dwa rozmiary i jeśli nie ma silnego powodu, aby odstąpić od używania któregokolwiek z nich, rozmiar można kontrolować za pomocą fabSizeatrybutu XML FloatingActionButtonkomponentu.

Rozważ użycie opcji app:fabSize="normal"lub app:fabSize="mini", np .:

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

Podane tło powoduje wyświetlenie poniższego przycisku na moim urządzeniu (Nexus 7 2012)

Dla mnie wygląda dobrze.

Jaki jest Twój cel?

Jeśli ustawisz rozmiar obrazu ikony na większy:

1. Upewnij się, że rozmiar obrazu jest większy niż rozmiar docelowy (so you can set max image size for your icon)

2. Rozmiar mojego obrazu ikony docelowej to 84dp, a rozmiar fab to 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" />

Jeśli używasz androidx 1.0.0 i używasz niestandardowego rozmiaru fab, będziesz musiał określić niestandardowy rozmiar za pomocą

app:fabCustomSize="your custom size in dp"

Głuszony rozmiar to 56dp i istnieje inna odmiana, to jest fabryka o małych rozmiarach, która wynosi 40 dp, jeśli używasz czegokolwiek, będziesz musiał to określić, aby wypełnienie zostało poprawnie obliczone

Tak FABjak jest ImageViewMożesz użyć scaleTypeatrybutu, aby zmienić rozmiar ikony w podobny sposób ImageView. Domyślny scaleTypedla FABjest fitCenter. Możesz użyć centeri, centerInsideaby ikona była odpowiednio mała i duża.

Wszystkie wartości scaleTypeatrybutu to - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYi matrix.

Więcej informacji znajdziesz pod adresem https://developer.android.com/reference/android/widget/ImageView.ScaleType.html .

wyłączenie odpowiedzi @ IRadha w ustawieniu do rysowania wektorowego android:height="_dp" i ustawienie typu skali, aby android:scaleType="center" ustawić rysowany na dowolny rozmiar

Możesz grać z następującymi ustawieniami FloatingActionButton: android: scaleType i app: maxImageSize. Jeśli chodzi o mnie, mam pożądany wynik, jeśli android: scaleType = "centerInside" i app: maxImageSize = "56dp".