Aligning drawableLeft with text of button

Question

Here is my layout:

The issue I\'m facing is with the drawable checkmark. H

Answer 1

There are several solutions to this problem. Perhaps the easiest on some devices is to use paddingRight and paddingLeft to move the image and text next to each other as below.

Original button

The problem here is on smaller devices this padding can cause unfortunate problems such as this:

The other solutions are all some version of "build a button out of a layout an image and a textview". They work, but completely emulating a button can be tricky. I propose one more solution; "build a button out of a layout an image, a textview, and a button"

Here's the same button rendered as I propose:

As you can see, the button is now within a relative layout, but it's text and drawableLeft are not part of the button, they are in a separate layout that's placed on top of the button. With this, the button still acts like a button. The gotchas are:

1. The inner layout needs an elevation for newer versions of Android. The button itself has an elevation greater than the ImageView and TextView, so even though they are defined after the Button, they will still be "below" it in elevation and be invisible. Setting 'android:elevation' to 10 solves this.
2. The textAppearance of the TextView must be set so that it has the same appearance as it would in a button.