Androidアプリでボタン内に画像とテキストを中央寄せで表示する

やりたいこと

ボタンの中央に、画像とテキストを並べて表示させたい。
画像が左寄せ・右寄せなら android:drawableLeft 等を利用すると良いが、横幅が可変のボタンで画像もテキストも中央寄せで表示したい場合は使えなかった。

成果物はこんな感じ。

実現方法

String中に画像を埋め込めるSpannableStringを利用する。

make_button.kt

val button = View.inflate(context, R.layout.sample_button, null) as Button
val imageResourceId = R.drawable.icon

val ss = SpannableString("  サンプル")
val drawable = ContextCompat.getDrawable(context, imageResourceId)
drawable.setBounds(0, 0, 50, 50)
val span = ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BASELINE)
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE)

button.text = ss
addView(button)

sample_button.xml

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:text="サンプル"
    android:background="@android:color/holo_blue_dark"
    android:textStyle="bold"
    android:textAllCaps="false" />

ハマりどころ

画像が表示されない

Android5.0以上だとButtonにandroid:textAllCaps="false"が設定されてないと不具合で画像が表示されないらしい。
1時間溶かした…。

sample_button.xml

<Button
    ...
    android:textAllCaps="false" />

参考

How to center icon and text in a android button with width set to "fill parent" - Stack Overflow
https://stackoverflow.com/a/8386510

android - SpannableString with Image example - Stack Overflow
https://stackoverflow.com/a/3177667

Button setText with Spannable doesn't work for Android 5.0 Lollipop - Stack Overflow
https://stackoverflow.com/questions/29007746/button-settext-with-spannable-doesnt-work-for-android-5-0-lollipop