在android中创建一个带有图标的按钮

Question

我正在尝试创建一个带有居中图标和文本的按钮作为示例：

我尝试过使用带有 drawableTop 的 Button，但图标和文本的居中在不同的设备屏幕上不能很好地缩放。 使用约束布局作为按钮更好吗？似乎应该有更好的方法。 有什么想法吗？

Answer 1

您可以使用MaterialButton。

只有图标：

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.App.Button.OutlinedButton.IconOnly"
        app:icon="@drawable/..."/>

与：

<style name="Widget.App.Button.OutlinedButton.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">48dp</item>
    <item name="android:minHeight">48dp</item>
</style>

或图标+文字：

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:iconGravity="top"
        android:text="BUTTON"
        app:icon="@drawable/..."/>

Answer 2

你可以使用它的方法很多，这里我附上你的代码和图像请检查它。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#10273c"
    android:gravity="center"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/round_corner_purple"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@drawable/ic_call" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Contact"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/round_corner_purple"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@drawable/ic_dialpad" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Code"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

可绘制文件：round_corner_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="15sp">

    <stroke android:width="1dp" android:color="#53545b"/>
    <solid android:color="#10273c"/>

    <corners
        android:radius="10dp"/>


</shape>

备注 请在 string.xml 中添加文本以获得良好的实践。

Answer 3

有很多方法可以设计这个。我更喜欢使用MaterialCardView。关注 xml 可能会对您有所帮助。

<com.google.android.material.card.MaterialCardView
    android:id="@+id/btnCantacts"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cardCornerRadius="7dp"
    app:strokeWidth="1dp"
    app:strokeColor="#DD7B3B"
    app:cardBackgroundColor="#1E1E1E">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_phone"/>

        <com.google.android.material.textview.MaterialTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contacts"
            android:textColor="#FFFFFF"
            android:layout_gravity="center"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>