How to center icon in a MaterialButton which has no text?

廉价感情. 提交于 2019-12-04 19:27:19

问题


I'm using the latest version of the com.google.android.material:material library (i.e. 1.1.0-alpha03) and I have a MaterialButton defined with an icon and no text as follows:

I was hoping the MaterialButton would be rendered as a square with the icon centred within it but instead the MaterialButton is rendered as follows:

If I change the iconGravity value to "textStart" the MaterialButton is rendered as follows:

This is a slight improvement to the positioning of the icon but the icon is still a little off centre. If I change the insetLeft, insetRight, insetTop and insetBottom values to 0dp the MaterialButton is rendered as follows:

This is an improvement to the shape of the button but the icon is still a little off centre.

Anyone know whether there's something further I can do to centre the icon within the MaterialButton?


回答1:


Found it. The attribute I was missing was app:iconPadding="0dp".

So, from my experiments, the minimum attributes needed to create a square MaterialButton which has a centred icon and no text is the following:

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

These attributes produce a MaterialButton as follows:




回答2:


There is also an Icon version of the material style on your button. For filled buttons like you are using, you could set the style to Widget.MaterialComponents.Button.Icon.



来源:https://stackoverflow.com/questions/54713087/how-to-center-icon-in-a-materialbutton-which-has-no-text

工具导航Map