DrawableLeft in center with text

The easiest solution IMO:

yourButtonView.text = SpannableString(" ${getString(R.string.your_string)}").apply {
            setSpan(
                ImageSpan(requireContext(), R.drawable.your_icon),
                0,
                1,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
            )
        }

Is a bit hacky? Maybe. Does it work with every button (MaterialButton, AppCompatButton, Button, etc)? It does.

I prefer this rather than going with all the hassle of creating a custom view or something like that.


After giving Google's approach a try over 9000 times, I almost always ended up using a ViewGroup to put both side by side, particularly a RelativeLayout or LinearLayout and then adding an ImageView and a TextView. It's lame, but drawableStart/End have so many missing features that you'll waste a lot of time before you realize "you can't do it".

Alignments, tinting, Vectors, etc. All those things are harder or impossible with the "built in" drawable.


Finally, after all these years, we have possibility to achieve such behavior in simple and intuitive way. All you have to do is use MaterialButton from Google Material library. Then use style with icon. After that you can use app:iconGravity property and set it to textStart

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Some text"
        app:iconGravity="textStart"
        app:icon="@drawable/some_icon" />