D. Math D. Math - 6 months ago 9
Android Question

Button with left icon and text perfectly aligned

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

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

Also this question answered in this post.

Comments