5
votes

MaterialButton avec l'icône ne centre pas le texte

J'essaie d'utiliser un bouton matériel où je veux une icône à l'extrême gauche, puis du texte au centre. Mais lorsque je mets l'icône à gauche par exemple, je peux clairement voir le texte poussé vers la droite. y-a-t-il un moyen d'éviter ça? Je veux que le texte soit centré et je voudrais éviter de faire une solution de piratage pour cela.

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/test2Button"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/some_icon"
        android:drawableTint="@color/colorPrimary"
        android:text="TEST"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

Pour info, j'ai essayé la même chose avec un bouton normal, même problème:

<com.google.android.material.button.MaterialButton
        android:id="@+id/testButton"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TEST"
        android:textAlignment="center"
        app:icon="@drawable/some_icon"
        app:iconGravity="start"Â´
        app:iconTint="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

Edit: Image ajoutée

android android-button material-components-android

7 commentaires

Essayez d'utiliser l' app:iconGravity avec la gravité du texte.

Même problème malheureusement. J'avais essayé ça aussi: /

Je ne comprends pas le problème ici. Vous devez ajouter une image à la sortie attendue et à la sortie actuelle.

Je viens d'ajouter l'image

Cela me va bien. Pensez simplement que l'icône a maintenant ses propres limites et que le texte est centré sur l'espace laissé pour cela.

Avez-vous trouvé une solution?

Ma solution stackoverflow.com/a/61251696/9119277 pourrait vous aider

4 Réponses :

0
votes

Essayez android:textAlignment="center" .

1 commentaires

Oui, j'ai essayé la première chose. La seule chose qui l'a réellement déplacé était sur le bouton material, en définissant insetRight sur un certain dp, mais cela déplace également le bouton entier de la droite, donc ce n'est pas une option.

2
votes

Vous pouvez utiliser l'attribut iconGravity pour modifier la position de l'icône:

        <com.google.android.material.button.MaterialButton
            app:iconGravity="textStart"
            app:iconPadding="0dp"
            ../>

Vous pouvez également réduire le remplissage entre le texte et l'icône avec l'attribut iconPadding :

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button"
            app:icon="@drawable/ic_add_24px"
            app:iconGravity="textStart"
            android:text="BUTTON"
            />

2 commentaires

salut, une meilleure solution ??

Celui-ci fonctionne pour moi, mais je dois faire des essais et des erreurs avec la valeur iconPadding pour que le texte soit centré sur toute la largeur

1
votes

Pour tous ceux qui consultent cela plus tard, j'ai trouvé un moyen de le faire en ajoutant la largeur intrinsèque de l'icône en tant que remplissage négatif au bouton

<button>.iconPadding = -(icon?.intrinsicWidth ?: 0)

C'est parce que le texte est poussé exactement par la intrinsicWidth de l'icône

0 commentaires

0
votes

J'ai trouvé un moyen de le faire sans avoir à créer une vue personnalisée et à ajouter beaucoup de logique de mise en page personnalisée. Le MaterialButton semble avoir des attributs icon et iconGravity . Voir le code et l'exemple de sortie ci-dessous. Remarque: le style personnalisé de l'exemple de code étend Widget.MaterialComponents.Button

<com.google.android.material.button.MaterialButton
    android:id="@+id/signUpButton"
    style="@style/Button.AppTheme.Primary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Sign up with Email"
    app:icon="@drawable/ic_envelope"
    app:iconGravity="textStart"/>

2 commentaires

J'ai essayé cela aussi, cela ne fonctionnait malheureusement pas pour moi à l'époque.

Vérifiez simplement ... dans l'exemple de code que vous avez posté, vous utilisez "start" et non "textStart" et il y a un 'après cette ligne. Avez-vous essayé avec "textStart"?