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
?
Create a RelativeLayout "wrap_content" with the button image as the background or the button itself as the first element of the layout. Get a LinearLayout and set it to "layout_centerInParent" and "wrap_content". Then set your Drawable as an Imageview.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With