Passen Sie die Symbolgröße der schwebenden Aktionstaste (fab) an.


172

Schwimmender Knopf Die neue schwebende Aktionstaste sollte 56dp x 56dp groß sein und das Symbol darin sollte 24dp x 24dp groß sein . Der Abstand zwischen Symbol und Schaltfläche sollte also 16 dp betragen .

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

Und das ist das Ergebnis, das ich erhalte:
Floating Button Ergebnis
Ich habe das Symbol aus \ material-design-icons-1.0.0 \ content \ drawable-hdpi \ ic_add_black_48dp.png
https://github.com/google/material-design-icons/releases verwendet /tag/1.0.1

Wie kann die Größe des Symbols innerhalb der Schaltfläche genau wie in den Richtlinien beschrieben festgelegt werden?

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



@InsaneCat Vielleicht umgekehrt, weil die Frage, die Sie erwähnt haben, aktueller ist als meine.
Vovahost

Antworten:


184

Da Ihr Inhalt 24dp x 24dp ist, sollten Sie das 24dp-Symbol verwenden . android:scaleType="center"Stellen Sie dann Ihren ImageButton ein, um eine automatische Größenänderung zu vermeiden.


Können Sie einen Link zu einer Site erklären oder löschen , warum zum Beispiel im Ordner drawable-hdpi Bilder mit _18dp.png, _24dp.png, _36dp.png, _48dp.png vorhanden sind?
Vovahost

Ich verstehe Ihre Frage nicht, es gibt 18dp, 24dp, 36dp und 48dp für Bilder unterschiedlicher Größe.
Gaëtan M.

Erinnern Sie sich an die alten Android_Design_Icons, die nur eine Variante des Symbols im HDPI-Ordner hatten, nämlich 48 x 48 Pixel? Warum gibt es jetzt im HDPI-Ordner 4 verschiedene Auflösungen für dasselbe Symbol, dh 27px x 27px, 36px x 36px, 54px x 54px, 72px x 72px?
Vovahost

1
ImageButton ist eine Unterklasse von ImageView, Sie haben also ein scaleType-Attribut und der Standard-scaleType ist ScaleType.FIT_CENTER
Gaëtan M.

4
Funktioniert nicht mehr mit com.android.support:support-v4:28.0.0-rc01
StarWind0

116

Machen Sie diesen Eintrag in dimension

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

Hier ist 36dp die Symbolgröße auf der Gleitkomma-Schaltfläche. Dadurch wird für alle Symbole für schwebende Aktionsschaltflächen eine Größe von 36 dp festgelegt.

Aktualisierungen gemäß Kommentaren

Wenn Sie die Symbolgröße auf eine bestimmte schwebende Aktionsschaltfläche einstellen möchten, wählen Sie einfach die Attribute der schwebenden Aktionsschaltfläche wie app: fabSize = "normal" und 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"

3
Das ist genau das, was ich brauchte - einfach und leicht. Danke fürs Schreiben.
Blisterpeanuts

1
Ja. Es funktioniert nicht mit github.com/Clans/FloatingActionButton . Es funktioniert, wenn Sie Androiden FloatingActionButton
Abhishek

2
Yeaaaah, aber ich möchte es nicht über die App hinweg tun!
StarWind0

@ StarWind0 Ich muss die Attribute fabSize und scaleType verwenden, wenn Sie eine einzelne schwebende Aktionsschaltfläche anwenden möchten. Ich habe meine Antwort aktualisiert.
Abhishek

109

Versuchen Sie, app:maxImageSize="56dp"anstelle der obigen Antworten zu verwenden, nachdem Sie Ihre Support-Bibliothek auf Version 28.0.0 aktualisiert haben


1
Wie auch immer, Sie bekommen dies nicht in der Version 28.0.0, Sie werden es in Androidx bekommen.
Khemraj

1
Ich habe nicht zu AndroidX gewechselt, dies ist, was ich benutze: api 'com.android.support:design:28.0.0'
Robin

3
Dies hat bei mir funktioniert, aber ich möchte mehr Informationen, um zu verstehen, warum das Definieren eines maxIconSizeSymbols die Symbolgröße ändert.
Stramin

44

Es gibt drei wichtige XML-Attribute für benutzerdefinierte FABs:

  • app:fabSize: Entweder "mini" (40 dp), "normal" (56 dp) (Standard) oder "auto"
  • app:fabCustomSize: Hiermit wird die Gesamtgröße des FAB festgelegt.
  • app:maxImageSize: Hiermit wird die Symbolgröße festgelegt.

Beispiel:

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

Die FAB-Auffüllung (der Abstand zwischen dem Symbol und dem Hintergrundkreis, auch Welligkeit genannt ) wird implizit berechnet durch:

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

Beachten Sie, dass die Ränder der Fab durch die üblichen android:marginXML-Tag-Eigenschaften festgelegt werden können.


27

Die Entwurfsrichtlinien definieren zwei Größen. Sofern es keinen starken Grund gibt, von einer der beiden Abweichungen abzuweichen, kann die Größe mit dem fabSizeXML-Attribut der FloatingActionButtonKomponente gesteuert werden.

Erwägen Sie die Angabe von entweder app:fabSize="normal"oder app:fabSize="mini"zB:

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

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

Mit dem von Ihnen angegebenen Hintergrund ergibt sich auf meinem Gerät die folgende Schaltfläche (Nexus 7 2012).

Geben Sie hier die Bildbeschreibung ein

Sieht gut für mich aus.


7
Ich habe die Polsterung eingestellt, aber es macht nichts. Und die richtige Polsterung wäre 16 dp, nicht 32 dp
vovahost

10

Was ist dein Ziel?

Wenn Sie die Größe des Symbolbildes auf ein größeres einstellen:

  1. Stellen Sie sicher, dass das Bild größer als Ihre Zielgröße ist (so you can set max image size for your icon)

  2. Meine Zielsymbolbildgröße ist 84dp und die Fab-Größe ist 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" />

6

Wenn Sie androidx 1.0.0 verwenden und eine benutzerdefinierte Fab-Größe verwenden, müssen Sie die benutzerdefinierte Größe mit angeben

app:fabCustomSize="your custom size in dp"

Bei Deafult beträgt die Größe 56 dp, und es gibt eine andere Variante, nämlich die kleine Fab mit 40 dp. Wenn Sie etwas verwenden, müssen Sie es angeben, damit die Polsterung korrekt berechnet wird


Genau das habe ich gesucht! Sie müssen nicht einmal einstellen layout_widthund layout_height. Es funktioniert einfach. Dies ist auch verfügbar amcom.android.support:design:28.0.0
PNDA

4

Wie FABist wie ImageViewso Sie können scaleTypeAttribut ebenfalls die Symbolgröße ändern ImageView. Standard scaleTypefür a FABist fitCenter. Sie können das Symbol verwenden centerund verwenden centerInside, um es klein bzw. groß zu machen.

Alle Werte für das scaleTypeAttribut sind - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYund matrix.

Weitere Informationen finden Sie unter https://developer.android.com/reference/android/widget/ImageView.ScaleType.html .


3

Aus der Antwort von @ IRadha in der Einstellung "Vektorzeichnen" android:height="_dp" und Festlegen android:scaleType="center" des Skalentyps, um das Zeichnen auf die jeweils festgelegte Größe festzulegen


2

Sie können mit den folgenden Einstellungen von FloatingActionButton spielen: android: scaleType und app: maxImageSize. Ich habe ein wünschenswertes Ergebnis, wenn android: scaleType = "centerInside" und app: maxImageSize = "56dp".

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.