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

172

Pływający przycisk 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ę:
Wynik pływającego przycisku
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

wowyost
źródło
Możliwy duplikat: stackoverflow.com/a/59455009/3974530
InsaneCat
@InsaneCat Może na odwrót, ponieważ pytanie, o którym wspomniałeś, jest nowsze niż moje.
vovaost

Odpowiedzi:

184

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.

Gaëtan M.
źródło
Czy możesz wyjaśnić lub upuścić łącze do jakiejś witryny, dlaczego na przykład w folderze drawable-hdpi znajdują się obrazy _18dp.png, _24dp.png, _36dp.png, _48dp.png.
vovaost
Nie rozumiem twojego pytania, są 18dp, 24dp, 36dp i 48dp dla obrazów o różnych rozmiarach.
Gaëtan M.,
Czy pamiętasz stare Android_Design_Icons, które miały tylko jeden wariant ikony w folderze hdpi, który miał 48 pikseli x 48 pikseli. Dlaczego teraz w folderze hdpi są 4 różne rozdzielczości dla tej samej ikony, tj. 27px x 27 px, 36px x 36px, 54px x 54px, 72px x 72px?
vovaost
1
ImageButton jest podklasą ImageView, więc masz atrybut scaleType, a domyślny typ scaleType to ScaleType.FIT_CENTER
Gaëtan M.,
4
Nie działa już z
com.android.support:support-v4:28.0.0-rc01
116

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"
Abhishek
źródło
3
To jest to, czego potrzebowałem - proste i łatwe. Dzięki za wysłanie wiadomości.
Blisterpeanuts
1
Tak. Nie działa z github.com/Clans/FloatingActionButton . Działa, gdy używasz androidów FloatingActionButton
Abhishek
2
Tak, ale nie chcę tego robić w całej aplikacji!
StarWind0
@ StarWind0 I musisz użyć atrybutów fabSize i scaleType, jeśli chcesz ubiegać się o pojedynczy pływający przycisk akcji. Zaktualizowałem moją odpowiedź.
Abhishek
110

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

Rudzik
źródło
1
Tak czy inaczej, nie dostaniesz tego w wersji 28.0.0, dostaniesz to w systemie Androidx.
Khemraj
1
Nie przeszedłem na AndroidX, używam tego: api 'com.android.support:design:28.0.0'
Robin
3
U mnie to zadziałało, ale chciałbym uzyskać więcej informacji, aby zrozumieć, dlaczego zdefiniowanie maxIconSizezmienia rozmiar ikony.
stramin
44

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.

varun
źródło
27

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" />
Cristian Almstrand
źródło
15
<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)

wprowadź opis obrazu tutaj

Dla mnie wygląda dobrze.

Chris K.
źródło
7
Ustawiłem wyściółkę, ale nic nie robi. A prawe wypełnienie będzie wynosić 16 dp, a nie 32 dp
vovaost
10

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" />
Shem Alexis Chavez
źródło
6

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

Suhaib Roomy
źródło
To jest dokładnie to, czego szukałem! Nie musisz nawet ustawiać layout_widthi layout_height. Po prostu działa. To jest również dostępne w dniucom.android.support:design:28.0.0
PNDA
4

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 .

lRadha
źródło
3

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

Daniel Dube
źródło
2

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

Andrew Glukhoff
źródło