CODEWITHSUNDEEP
androidandroid-layout
Doragon
Doragon

Reputation: 367

drawableStart not showing drawable

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>

Upvotes: 3

Views: 4102

Answers (3)

unemployer
unemployer

Reputation: 208

From the answers above here, this seems to be the easiest way to go.
I modified it to Arabic in the settings and confirmed that it works properly.

<Button
    app:icon="@drawable/baseline_add_24_white"
    app:iconGravity="textStart"
/>

Upvotes: 1

Olayiwola Osho
Olayiwola Osho

Reputation: 189

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"/>

Upvotes: 2

Zain
Zain

Reputation: 40810

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>

Upvotes: 3

Related Questions