Reputation: 329

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 :

https://i.sstatic.net/Rc6Et.png

And here is my actual result :

https://i.sstatic.net/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!

Upvotes: 5

Answers (6)

Squall Huang

Reputation: 705

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

Upvotes: 0

revilo

Reputation: 179

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>

Upvotes: 2