Question

I need to add drawable to my button and added drawableLeft to it. If button’s width is set to wrap_content, then everything is fine and looks good. But if I set custom width to my button then drawableLeft image goes away from button’s caption to left edge of the button. Is this somekind of a design bug in android? How can I fix this to let button look the same on custom width?

Regards,
evilone

Answer 1

Seems that x-position of the drawableLeft depends on left padding and x-scroll position: source. So that’s by-design behavior. I think you’d better use SpannableString and ImageSpan classes to display an image to the left of the button’s text:

final SpannableStringBuilder builder = new SpannableStringBuilder("\uFFFC");
builder.setSpan(new ImageSpan(getResources.getDrawable(R.drawable.your_drawable)),
    0, builder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
builder.append(getString(R.string.your_string));
textView.setText(builder);

Also, you can use Html.fromHtml() method to build Spannable from HTML. But in this case you need to implement Html.ImageGetter interface to load images from resources.

EDIT: There’s a way to do a button-like widget using only XML:

<LinearLayout
  android:layout_width="200dip"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:clickable="true"
  android:focusable="true"
  android:background="@android:drawable/btn_default">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:duplicateParentState="true"
    android:src="@drawable/button_icon"/>
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:duplicateParentState="true"
    android:text="@string/button_text"/>
</LinearLayout>