图标和文本居中的按钮

Question

我希望按钮的图标和图标附近的文本都位于中心。我设法用填充来做到这一点，但由于 android 有很多不同的屏幕尺寸，它在小屏幕尺寸上效果不佳。这是我的代码：

 <Button
        android:id="@+id/scanbtn"
        android:text="@string/scan_btn_text"
        android:textAlignment="center"
        android:fontFamily="@font/open_sans_light"
        android:drawableStart="@drawable/ic_photo_camera"
        android:paddingStart="100dp"
        android:paddingEnd="120dp"
        android:textAllCaps="false"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_marginEnd="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="25dp"
        android:background="@drawable/border"
        android:textColor="@color/white"
        android:textSize="19sp"
        android:transitionName="use/scanbtn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="parent" />

这是我的按钮。请告诉我其他（更好的）方法让这个按钮在所有屏幕尺寸上都相同

Answer 1

在各种屏幕尺寸上保持按钮填充

--- 创建不同值的文件夹

values, values-sw350dp, values-sw480dp, values-sw600dp, values-sw720dp

-- 在每个文件夹dimens.xml中添加一个文件

-- 在每个文件上添加同名不同值的维度

<!-- Add this to dimens.xml in values folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="button_padding_start">100dp</dimen>
</resources> 

<!-- Add this to dimens.xml in values-sw350dp folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="button_padding_start">150dp</dimen>
</resources>

<!-- Do the same for all other folders and keep increasing the value of button_padding_start -->

然后从您的布局中引用值而不是使用固定 dp，并让 android select 根据屏幕尺寸做出最佳选择，以在各种设备上保持相似的外观。

<!-- paddingEnd may not be necessary -->
android:paddingStart="@dimen/button_padding_start"

了解更多关于支持不同屏幕的信息here

Answer 2

使用以下代码并删除按钮 XML 中的所有填充： android:drawableLeft="@drawable/image

希望你能得到答案。请select作为正确答案。

Answer 3

只需用 FrameLayout 包装一个 TextView 并将 Framelayout 用作按钮。

<FrameLayout
        android:background="#E06666"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:background="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/icon"
            android:text="Scan"
            android:layout_gravity="center"
            android:gravity="center"
            />
 </FrameLayout>

下面是我的结果：

Answer 4

只需将 MaterialButton 与 app:iconGravity 属性一起使用。
使用 textStart 或 textEnd 值。

    <!-- Icon gravity textStart -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/...."
        app:iconGravity="textStart"
        android:text="@string/..."
        .../>

    <!-- Icon gravity textEnd -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="textEnd"
        android:text="@string/...."/>

图标和文本居中的按钮

Button with icon and text centered

android

material-design

android-button

material-components-android

material-components