drawableStart not showing drawable

user_14481140 0
Viewed 1290

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>
android-layout android
2 Answers

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>
user_98516080

After a whole lot of searching I finally figured out how to make it work android:drawableStart not working seems to be an issue and here is the link to the issue and fix https://github.com/material-components/material-components-android/issues/1174

Here's the fix

<Button
    android:id="@+id/previous_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/arrow_left"
    app:iconGravity="textStart"
    app:iconTint="@android:color/white"
    android:text="@string/previous_button"
    android:drawablePadding="4dp"/>

Instead of using drawableBottom|Top|Left|... use MaterialButton's attributes app:icon, app:iconGravity and app:iconTint

Note drawableStart seems to be the only one with the issue the others work

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:text="@string/your_text"
    android:drawableEnd="@drawable/your_image"/>

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:text="@string/your_text"
    android:drawableTop="@drawable/your_image"/>

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:text="@string/your_text"
    android:drawableBottom="@drawable/your_image"/>

Then for Left

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:text="@string/your_text"
    app:icon="@drawable/arrow_left"
    app:iconGravity="textStart"
    app:iconTint="@android:color/white"/>
user_117792430
Related