Wie zentriert man das Symbol in einem MaterialButton, der keinen Text hat?
Lesezeit: 4 Minuten
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:
Wenn ich die ändere iconGravity Wert zu "textStart" das MaterialButton wird wie folgt wiedergegeben:
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:
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".
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:
Diese Attribute erzeugen a MaterialButton folgendermaßen:
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
Kurosh
Ändern Sie iconGravity in textStart und iconPadding in 0dp
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
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
Raffael C
verwenden Widget.Material3.Button.OutlinedButton.Icon Stil :
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, warapp: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