带有左图标和文本完美对齐的按钮

Question

晚上好，

我正在开发一款Android应用程序，目前正在使用XML编写登录界面。

我正在尝试创建带有图标和文本的按钮，就像下面的图片：

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

这是我的实际结果：

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

这是我的代码：

    <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"/>

我卡在这一步了。

如何使用XML代码获得所需的最终结果？

谢谢！

- D. Math

Answer 1

您可以像这样为可绘制对象添加填充：android:drawablePadding="50dip"

此帖子中也回答了这个问题。

- SafakEsberk

Answer 2

使用android:drawablePadding属性

- qichuan

Answer 3

您只需要指定android:paddingLeft属性。

例如，尝试指定36dp的值。

- Omar El Halabi

Answer 4

更好的选择是将按钮设置为相对布局（RelativeLayout）/线性布局（LinearLayout），布局设置在内部，drawablePadding不会与文本和按钮的不同长度很好地配合使用。

基本上，RelativeLayout是您的按钮，其中包含一个嵌套的ImageView和TextView，您可以很好地控制布局，使得图片和文本在按钮内具有一致的填充。

我没有测试以下内容，这基本上就是您需要的。

    <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>

- revilo

Answer 5

android:gravity="center_vertical"

//在两个textView中使用

- Madhav Gor

Answer 6

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

- Squall Huang