Кнопки выглядят некрасиво в эмуляторе Android

Question

У меня есть этот основной макет. Он должен отображать 3 кнопки, но я показываю вам только 1 определение кнопки, чтобы не вводить в вопросе в основном код. Другие кнопки имеют такое же определение.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingTop="70dp"
    android:paddingBottom="70dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="50dp">

        <Button
            android:id="@+id/btnRfid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/main_button_background"
            android:padding="20dp"
            android:text="@string/button_rfid"
            android:textSize="36sp"
            android:drawableLeft="@drawable/button_rfid"/>
    </LinearLayout>
</LinearLayout>

Это main_button_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFF"
        android:endColor="#949597"
        android:angle="270" />
    <corners android:radius="20dp" />
    <stroke android:width="5px" android:color="#000000" />
</shape>

Вот как я это вижу в редакторе дизайна Android Studio:

Однако, как это выглядит в эмуляторе:

Почему текст отображается таким образом? Чего-то не хватает?

Читая руководства, я не вижу ничего особенного в определении кнопки.

С уважением Jaime

Answer 1

1) Перенесите ваш проект на androidx.
2) Включите зависимость в ваш build.gradle:

реализация 'com.google.android.material: материал: 1.0.0'

3) Используйте в макете:

<com.google.android.material.button.MaterialButton
  android:id="@+id/material_icon_button"
  style="@style/Widget.MaterialComponents.Button.Icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/icon_button_label_enabled"
  app:icon="@drawable/icon_24px"/>

4) Не забудьте изменить тему applevel на тему Material Component.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>