Remove monospace font from button on material components

Question

How I can remove the monospace font from my buttons using the new material components?

<com.google.android.material.button.MaterialButton
        android:id="@+id/btn_register"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:fontFamily="@font/lato"
        app:backgroundTint="@color/white"
        android:textColor="?colorPrimary"
        android:text="Open Register Screen" />

This image shows the difference I'm looking to eliminate:

Darwin

Answer 1

I found the problem. It is not monospace font, it is letterSpacing. So I just add android:letterSpacing="0" on button to solve.

Darwin

nice one. How do you support api before 21 ? – Glarum

I make the change like @Cameron suggest and I have no problem on API before 21 – Darwin

Even though Android Studio says it's API 21+ only ? – Glarum

yes.. maybe you can add targetApi.. <item name="android:letterSpacing" tools:targetApi="lollipop">0</item> – Darwin

yes that does remove the warning, thanks :) Anyway, I created a style in styles-21 just for that. Testing on a Samsung S4 (KitKat), there doesn't seem to be any extra spacing so good news for now. Thanks for the help ! – Glarum

Answer 2

To update letterspacing globally for all your Buttons, you should use theming: https://material.io/develop/android/theming/typography/

You can redefine ?attr/textAppearanceButton in your theme to point to a different text appearance that has whatever letterSpacing you want.

Define the attr in your theme like this:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
    <item name="textAppearanceButton">@style/TextAppearance.MyApp.Button</item>
</style>

And create a new TextAppearance Style:

<style name="TextAppearance.MyApp.Button" parent="TextAppearance.MaterialComponents.Button">
  <item name="android:letterSpacing">0</item>
</style>

Nietzsche

Answer 3

chỉ cần thêm android:letterSpacing = 0 vào style button của bạn như sau:

<style name="StyleButtonCancelGray" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:textColor">@color/gray80</item>
    <item name="android:insetTop">@dimen/d_0</item>
    <item name="android:insetBottom">@dimen/d_0</item>
    <item name="enforceTextAppearance">@style/TextView.SemiBold</item>
    <item name="backgroundTint">@color/gray80_15</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:letterSpacing">0</item>
</style>

Trong tag Button của bạn, áp dụng nó:

<com.google.android.material.button.MaterialButton
        android:id="@+id/btnCancelFilter"
        style="@style/StyleButtonCancelGray"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/d_7"
        android:stateListAnimator="@null"
        android:text="@string/cancel_filter"
        android:textSize="@dimen/font_size_16"
        app:cornerRadius="@dimen/d_6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnConfirmFilter"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Squinty