Wie zentriert man das Symbol in einem MaterialButton, der keinen Text hat?

Lesezeit: 4 Minuten

Benutzer-Avatar
Adil Hussein

Ich verwende die neuste Version der com.google.android.material:material Bibliothek (bzw 1.1.0-alpha03) und ich habe eine MaterialButton mit einem Symbol und ohne Text wie folgt definiert:

Ich hatte gehofft, die MaterialButton würde als Quadrat mit dem darin zentrierten Symbol gerendert werden, aber stattdessen die MaterialButton wird wie folgt wiedergegeben:

MaterialButton mit IconGravity-Wert von start

Wenn ich die ändere iconGravity Wert zu "textStart" das MaterialButton wird wie folgt wiedergegeben:

MaterialButton mit iconGravity-Wert von textStart

Dies ist eine leichte Verbesserung der Positionierung des Symbols, aber das Symbol ist immer noch etwas außermittig. Wenn ich die ändere insetLeft, insetRight, insetTop und insetBottom Werte zu 0dp das MaterialButton wird wie folgt wiedergegeben:

Geben Sie hier die Bildbeschreibung ein

Dies ist eine Verbesserung der Form der Schaltfläche, aber das Symbol ist immer noch etwas außermittig.

Weiß jemand, ob ich noch etwas tun kann, um das Symbol innerhalb der zu zentrieren MaterialButton?

  • Möglicherweise Duplikat von stackoverflow.com/questions/51633118/… Ich kann empfehlen, “textStart” und insetLeft=2dp zu verwenden (kann 1-4dp sein, also schauen Sie, was Sie haben, während Sie sich ändern)

    – Raskilas

    15. Februar 2019 um 16:18 Uhr

  • Danke für den Hinweis auf diesen Thread. Ich hatte diesen Thread gesehen, aber es ist nicht das gleiche Problem. Bei diesem Thread (soweit ich es verstanden habe) ging es darum, das Symbol zusammen mit dem Text innerhalb der zu zentrieren MaterialButton. Ich versuche, ein Symbol zu zentrieren, das keinen unterstützenden Text hat. Ich habe meine Antwort trotzdem gefunden. Das fehlende Attribut, das ich brauchte, war app:iconPadding="0dp".

    – Adil Hussain

    15. Februar 2019 um 16:37 Uhr

  • material.io/components/buttons/android#toggle-button

    – Naveen Kumar

    6. Juli 2021 um 16:45 Uhr

Benutzer-Avatar
Adil Hussein

Fand es. Das Attribut, das mir fehlte, war app:iconPadding="0dp".

Aus meinen Experimenten also die Mindestattribute, die zum Erstellen eines Quadrats erforderlich sind MaterialButton die ein zentriertes Symbol und keinen Text hat, ist die folgende:

<com.google.android.material.button.MaterialButton
    android:layout_width="52dp"
    android:layout_height="52dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:icon="@drawable/icon_next"
    app:iconGravity="textStart"
    app:iconPadding="0dp" />

Diese Attribute erzeugen a MaterialButton folgendermaßen:

MaterialButton mit quadratischer Form und zentriertem Symbol

  • Es würde nicht funktionieren, wenn das Symbol etwas größer ist. Versuchen Sie es mit einem 50-dp-Symbol. Ich weiß nicht einmal, ab welcher Größe es kaputt ist.

    – Oleksandr Albul

    19. November 2019 um 16:18 Uhr


  • @OleksandrAlbul Versuchen Sie es app:iconGravity="top". Es wird immer zentriert, unabhängig von der Breite.

    – XiWei

    2. August 2021 um 19:18 Uhr


Benutzer-Avatar
Kurosh

Ändern Sie iconGravity in textStart und iconPadding in 0dp

    app:iconPadding="0dp"
    android:padding="0dp"
    app:iconGravity="textStart"

Benutzer-Avatar
Bouh

Fügen Sie diesen Stil der Schaltfläche hinzu

<Button style="@style/Widget.App.Button.IconOnly"/>

dann in res/values/styles.xml folgendes hinzufügen

<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button">
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">48dp</item>
    <item name="android:minHeight">48dp</item>
</style>

Quelle: https://material.io/components/buttons/android

Verwenden Widget.Material3.Button.IconButton Stil

<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.IconButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_baseline_power_settings_new_24"
    app:backgroundTint="?android:attr/colorButtonNormal"
    android:layout_gravity="center"
    />

Geben Sie hier die Bildbeschreibung ein

Es gibt auch eine Icon Version des Materialstils auf Ihrer Schaltfläche. Für gefüllte Schaltflächen, wie Sie sie verwenden, können Sie den Stil auf festlegen Widget.MaterialComponents.Button.Icon.

  • Danke für den Vorschlag. Ich habe das gerade ausprobiert, aber ich habe festgestellt, dass es immer noch notwendig ist, das einzustellen insetLeft, insetTop, insetRight, insetBottom, iconGravity und iconPadding Attribute auf der MaterialButton wie in meiner Antwort beschrieben, um eine quadratische Form mit einem zentrierten Symbol zu erhalten. Wenn Sie ein Beispiel der Attribute, die Sie zusammen mit dem Stilattribut verwendet haben, und einen Screenshot des Ergebnisses teilen könnten, wäre das praktisch!

    – Adil Hussain

    21. Februar 2019 um 19:22 Uhr

Benutzer-Avatar
Wirling

ich habe bemerkt, dass app:iconGravity="textStart" funktioniert nicht mehr nachdem ich aktualisiert habe appcompat zu Version 1.4.0. Ich benutze jetzt app:iconGravity="textTop"

  • Danke für den Vorschlag. Ich habe das gerade ausprobiert, aber ich habe festgestellt, dass es immer noch notwendig ist, das einzustellen insetLeft, insetTop, insetRight, insetBottom, iconGravity und iconPadding Attribute auf der MaterialButton wie in meiner Antwort beschrieben, um eine quadratische Form mit einem zentrierten Symbol zu erhalten. Wenn Sie ein Beispiel der Attribute, die Sie zusammen mit dem Stilattribut verwendet haben, und einen Screenshot des Ergebnisses teilen könnten, wäre das praktisch!

    – Adil Hussain

    21. Februar 2019 um 19:22 Uhr

Benutzer-Avatar
Raffael C

verwenden Widget.Material3.Button.OutlinedButton.Icon Stil :

style="@style/Widget.Material3.Button.OutlinedButton.Icon"
app:icon="@drawable/ic_baseline_close_24"
app:iconGravity="textStart"
app:iconPadding="0dp"
android:padding="10dp"
android:minWidth="0dp"

1202280cookie-checkWie zentriert man das Symbol in einem MaterialButton, der keinen Text hat?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy