Button with left icon and text perfectly aligned

Question

Good evening,

I am developing an Android app and I am currently doing the Login interface in XML.

I am trying to create buttons with icon and text, like in the picture below :

http://i.imgur.com/J5Cj1w4.png

And here is my actual result :

http://i.imgur.com/VPALdDD.png

With this code :

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sign_up_facebook"
        android:text="@string/signup_with_facebook"
        android:textColor="@color/primaryTextLight"
        android:drawableLeft="@drawable/ic_facebook_box_white_24dp"
        android:layout_weight="0"
        android:background="@drawable/button_shape_login"/>

    <Button
        style="?android:textAppearanceSmall"
        android:layout_marginTop="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sign_up_google"
        android:text="@string/signup_with_google"
        android:textColor="@color/primaryTextLight"
        android:drawableLeft="@drawable/ic_google_plus_box_white_24dp"
        android:layout_weight="0"
        android:background="@drawable/button_shape_login"/>

I am stuck at this step.

How can I get the final needed result with XML code ?

Thank you!

Answer 1

You can give padding to drawable like this : android:drawablePadding="50dip"

Also this question answered in this post.

Answer 2

Use android:drawablePadding attribute

Answer 3

The better option is to actually make the button a Relative/Linear layout with the layout set inside, the drawablePadding will not work so well with different lengths of text and buttons.

Essentially, RelativeLayout which is your button with a nested ImageView and TextView and you'll have good control of the layout, with consistent paddings around images and text within the button.

I haven't tested the following, this is essentially what you need

    <LinearLayout
        android:id="@+id/facebookButton"
        android:layout_width="250dp"
        android:layout_height="80dp"
        android:orientation="horizontal">
        <ImageView
            android:src="@drawable/your_drawable"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"/>
        <TextView
            android:text="Sign up with Facebook"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"/>
    </LinearLayout>

Answer 4

You only need to specify android:paddingLeft attribute.

Try specifying a value of 36dp for example