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

Question

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?

Possibly duplicate of https://stackoverflow.com/questions/51633118/how-to-set-materialbutton-icon-to-the-center I may recommend to use "textStart" and insetLeft=2dp (may be 1-4dp, so look what you've got while changes) — Raskilas, Feb 15 '19 at 16:18
Thank you for pointing that thread out. I had seen that thread but it's not the same problem. That thread (from what I understood of it) was about centering the icon together with the text within the `MaterialButton`. I am trying to centre an icon which has no supporting text. I found my answer nonetheless. The missing attribute I needed was `app:iconPadding="0dp"`. — Adil Hussain, Feb 15 '19 at 16:37
https://material.io/components/buttons/android#toggle-button — Naveen Kumar, Jul 06 '21 at 16:45

Adil Hussain · Accepted Answer · 2019-02-15T16:42:21.570

154

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:

edited Feb 15 '19 at 16:42

answered Feb 15 '19 at 16:33

Adil Hussain

30,049
21
112
147

3

It wouldn't work if icon is slightly bigger. Try with 50dp icon. I don't even know after what size it is broken. – Oleksandr Albul Nov 19 '19 at 16:18
1

@OleksandrAlbul Try `app:iconGravity="top"`. It will always center it regardless of the width. – Xi Wei Aug 02 '21 at 19:18
1

Dynamically, I used `button.setIconGravity(MaterialButton.ICON_GRAVITY_TEXT_START);` – Skj Dec 23 '22 at 08:10
`app:iconSize` and `app:iconTint` can be useful too. – Slion Mar 05 '23 at 19:39
It works even on Android 4.2.2, cool! – kirkadev Mar 06 '23 at 08:47

Kourosh · Answer 2 · 2020-08-13T09:26:47.743

64

Change iconGravity to textStart and iconPadding to 0dp

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

edited Aug 13 '20 at 09:26

answered Mar 20 '20 at 17:28

Kourosh

2,239
13
18

score 12 · Answer 3 · answered Apr 08 '22 at 16:12

Use `Widget.Material3.Button.IconButton` style

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

Bouh · Answer 4 · 2021-10-17T20:14:26.947

Add this style to the button

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

then in res/values/styles.xml add the following

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

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

score 1 · Answer 5 · answered Feb 19 '19 at 15:38

1

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.

answered Feb 19 '19 at 15:38

Cameron Ketcham

7,966
2
28
27

Thanks for the suggestion. I've just tried this but I've found it's still necessary to set the `insetLeft`, `insetTop`, `insetRight`, `insetBottom`, `iconGravity` and `iconPadding` attributes on the `MaterialButton` as described in my answer to get a square shape with a centred icon. If you can share an example of the attributes that you've used together with the style attribute and a screenshot of the result that would be handy! – Adil Hussain Feb 21 '19 at 19:22

score 1 · Answer 6 · answered Dec 03 '21 at 09:50

1

I noticed that app:iconGravity="textStart" stopped working after I updated appcompat to version 1.4.0. I now use app:iconGravity="textTop"

answered Dec 03 '21 at 09:50

Wirling

4,810
3
48
78

score 1 · Answer 7 · answered Jul 26 '22 at 09:21

using Widget.Material3.Button.OutlinedButton.Icon style :

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"

score 1 · Answer 8 · edited Feb 27 '23 at 17:22

1

I was able to achieve this in code with:

button.setIconPadding(0);
button.setPaddingRelative(0, 0, 0, 0);
button.setIconGravity(MaterialButton.ICON_GRAVITY_TEXT_TOP);

edited Feb 27 '23 at 17:22

JustSightseeing

1,460
3
17
37

answered Feb 21 '23 at 20:50

Moises Martinez

31
6

score 0 · Answer 9 · answered Aug 14 '23 at 12:35

square button:

 <com.google.android.material.button.MaterialButton
        style="@style/Widget.Material3.Button.Icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:iconGravity="textTop"
        android:padding="0dp"
        app:cornerRadius="16dp"
        app:iconPadding="0dp"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:insetLeft="0dp"
        android:insetRight="0dp"
        app:backgroundTint="#30000000"
        app:iconTint="@color/white"
        app:icon="@drawable/bag"/>

circle :

<com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.Icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:cornerRadius="20dp"
            app:iconGravity="textStart"
            app:iconPadding="0dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:insetLeft="0dp"
            android:insetRight="0dp"
            app:backgroundTint="@color/white"
            app:iconTint="@color/colorPrimary"
            app:icon="@drawable/send"/>

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

9 Answers9

Use `Widget.Material3.Button.IconButton` style

Linked

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

9 Answers9

Use Widget.Material3.Button.IconButton style

Linked

Use `Widget.Material3.Button.IconButton` style