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 :

https://i.stack.imgur.com/Rc6Et.png

And here is my actual result :

https://i.stack.imgur.com/dCUXJ.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!

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

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

Also this question answered in this post.

edited May 23 '17 at 12:02

Community

1
1

answered Jun 02 '16 at 17:45

SafakEsberk

111
6

score 2 · Answer 2 · answered Jun 02 '16 at 17:46

2

Use android:drawablePadding attribute

answered Jun 02 '16 at 17:46

qichuan

1,110
7
8

score 2 · Answer 3 · answered Jun 02 '16 at 17:48

2

You only need to specify android:paddingLeft attribute.

Try specifying a value of 36dp for example

answered Jun 02 '16 at 17:48

Omar El Halabi

2,118
1
18
26

revilo · Answer 4 · 2016-06-03T15:31:01.743

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>

score 0 · Answer 5 · answered Jun 03 '16 at 10:28

0

android:gravity="center_vertical"

//use in both textView

answered Jun 03 '16 at 10:28

Madhav Gor

211
2
12

score 0 · Answer 6 · answered Jan 10 '23 at 08:18

0

<Button
        android:paddingLeft="50dp"
        android:textAlignment="textStart"
        android:drawableLeft="@drawable/"
/>

answered Jan 10 '23 at 08:18

Squall Huang

647
9
20

Button with left icon and text perfectly aligned

6 Answers6