it-swarm.com.de

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

Floating button Die neue schwebende Aktionstaste sollte 56dp x 56dp und das Symbol darin sollte 24dp x 24dp sein. Der Abstand zwischen Icon und Button sollte also 16dp 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 bekomme:
Floating button result
Ich habe das Icon von \material-design-icons-1.0.0\content\drawable-hdpi\ic_add_black_48dp.png verwendet
https://github.com/google/material-design-icons/releases/tag/1.0.1

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

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

150
vovahost

Da Ihr Inhalt 24dp x 24dp ist, sollten Sie 24dp-Symbol verwenden. Und dann setze Android:scaleType="center" in Ihrem ImageButton, um eine automatische Größenänderung zu vermeiden.

181
Gaëtan M.

Machen Sie diese Eingabe in Dimensionen

<!--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. Hiermit legen Sie die 36-Bit-Größe für alle Symbole der schwebenden Aktionstaste fest.

Aktualisierungen gemäß Kommentaren

Wenn Sie die Symbolgröße auf einen bestimmten Floating Action Button einstellen möchten, wählen Sie die Attribute für Floating Action Buttons 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"
105
Abhishek

Versuchen zu benutzen app:maxImageSize="56dp" anstelle der obigen Antworten, nachdem Sie Ihre Support-Bibliothek auf v28.0.0 aktualisiert haben

68
Robin

In den Gestaltungsrichtlinien sind zwei Größen definiert. Sofern es keinen eindeutigen Grund gibt, von der Verwendung abzuweichen, kann die Größe mit dem XML-Attribut fabSize der Komponente FloatingActionButton gesteuert werden.

Überlegen Sie, ob Sie entweder app:fabSize="normal" oder app:fabSize="mini", z.B.:

<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" />
26
<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 Hintergrund, den Sie angegeben haben, wird die Schaltfläche unten auf meinem Gerät angezeigt (Nexus 7 2012).

enter image description here

Sieht gut für mich aus.

15
Chris K.

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

  • app:fabSize: Entweder "Mini" (40dp), "Normal" (56dp) (Standard) oder "Auto"
  • app:fabCustomSize: Dies bestimmt die Gesamtgröße der FAB.
  • app:maxImageSize: Hiermit wird die Symbolgröße festgelegt.

Beispiel:

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

Der FAB-Abstand (der Abstand zwischen dem Symbol und dem Hintergrundkreis, auch bekannt als Welligkeit ) wird berechnet implizit durch:

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

Beachten Sie, dass die Ränder der Fab durch die üblichen XML-Tag-Eigenschaften Android:margin Festgelegt werden können.

11
varun

Was ist dein Ziel?

Wenn Sie die Bildgröße des Symbols auf einen größeren Wert 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. Die Bildgröße meines Zielsymbols ist 84dp & 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" />
    
7

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 ist die Größe 56dp und es gibt eine weitere Variation, nämlich die kleine Fab, die 40dp ist. Wenn Sie etwas verwenden, müssen Sie dies angeben, damit die Polsterung korrekt berechnet wird

4
Suhaib Roomy

Da FAB wie ImageView ist, können Sie scaleType verwenden, um die Symbolgröße ebenfalls ImageView zu ändern. Standardmäßig ist scaleType für FABfitCenter. Sie können center und centerInside verwenden, um das Symbol klein bzw. groß zu machen.

Alle Werte für das Attribut scaleType sind - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY und matrix.

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

4
lRadha

off of @ IRadhas Antwort in vektorzeichnender Einstellung Android:height="_dp" und stellen Sie den Skalentyp auf Android:scaleType="center" setzt die Zeichengröße auf die festgelegte Größe

3
Daniel Dube

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

2
Andrew Glukhoff