I'm trying to use a Material Button where I want an icon to the very left, and then some text in the center. But when I put in the icon on the left for instance, I can clearly see the text being pushed to the right. Is there any way to avoid this? I want the text to be centered, and would like to avoid doing a hacky solution for it..
<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" />
For info, I tried the same thing with a regular button, same issue:
<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" />
Edit: Image added
To anyone viewing this later I found a way to do this through adding the intrinsic width of the icon as a negative padding to the button
<button>.iconPadding = -(icon?.intrinsicWidth ?: 0)
This is because the text is pushed by exactly the intrinsicWidth
of the icon
You can use the iconGravity
attribute to change the position of the icon:
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button"
app:icon="@drawable/ic_add_24px"
app:iconGravity="textStart"
android:text="BUTTON"
/>
You can also reduce the padding between the text and the icon with the iconPadding
attribute:
<com.google.android.material.button.MaterialButton
app:iconGravity="textStart"
app:iconPadding="0dp"
../>
试试android:textAlignment="center"
。
I found a way to do this without having to create a custom view and add lots of custom layout logic. The MaterialButton
seems to have icon
and an iconGravity
attributes. See code and example output below. Note: The custom style in the example code extends 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"/>
android:includeFontPadding="false"
这在我的情况下起到了作用
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.