drawableStart not showing drawable

Question

I am learning android, and one of the challenges in the book said to add the previous button on my own. I did, and asked a friend for help putting the arrow on the left side, and he did, but he couldn’t figure out why drawableStart didn’t work. (drawableLeft did work)

Anyone know why drawableStart didn’t work? Or better yet: how to fix it?

    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:id="@+id/previous_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/arrow_left"
        android:text="@string/previous_button"
        android:drawablePadding="4dp"/>

    <Button
    android:id="@+id/next_button"
    android:layout_width="wrap_content"
    android:gravity="center"
    android:layout_height="wrap_content"
    android:drawableEnd="@drawable/arrow_right"
    android:drawablePadding="4dp"
    android:text="@string/next_button"/>
</LinearLayout>

The code under themes.xml :

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.GeoQuiz" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Answer 1

It seems that you're using Material design buttons, so use android:icon instead of android:drawableStart

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:id="@+id/previous_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/arrow_left"
        android:text="@string/previous_button"
        android:drawablePadding="4dp" />
    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:icon="@drawable/arrow_right"
        android:drawablePadding="4dp"
        android:text="@string/next_button"/>
</LinearLayout>

Update:

Didn't work. Now it doesn't show either arrow. And the program doesn't run in the emulator anymore

Appears to be a compatibility issue with android directive so, change it to app directive instead and added a style of Widget.MaterialComponents.Button.TextButton.Dialog as you use

<LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/previous_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:icon="@drawable/arrow_left"
        android:text="@string/previous_button"
        style="@style/Widget.MaterialComponents.Button.TextButton.Dialog"
        android:drawablePadding="4dp" />

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:layout_height="wrap_content"
        app:icon="@drawable/arrow_right"
        android:drawablePadding="4dp"
        android:text="@string/next_button"/>
    style="@style/Widget.MaterialComponents.Button.TextButton.Dialog"
</LinearLayout>