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

Question

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

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

Answer 1

有很多方法可以设计这个。我更喜欢使用 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>

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

您可以使用 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/..."/>

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

Creating a button with icon in android

android

android-button

material-components-android