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

时间:2016-06-02 17:39:29

标签: android xml button

晚上好,

我正在开发一个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代码获得最终所需的结果?

谢谢!

5 个答案:

答案 0 :(得分:4)

你可以像这样给出可填充的填充:android:drawablePadding="50dip"

Also this question answered in this post.

答案 1 :(得分:2)

使用android:drawablePadding属性

答案 2 :(得分:2)

更好的选择是实际使按钮成为内部布局设置的相对/线性布局,而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>

答案 3 :(得分:1)

您只需指定android:paddingLeft属性。

尝试指定值36dp,例如

答案 4 :(得分:0)

android:gravity="center_vertical"

//在textView

中使用