在按钮上水平垂直居中仅限于图标（不包括文本）的方法

Question

我正在创建一个应用程序，在底部有三个按钮，我想使用一些标准的Android图标，而不是文本或两者的组合。虽然有 android:drawableStart / top / bottom / etc 命令，但我希望这些图标能够居中显示。似乎没有简单的解决方案？下面是我的工作内容：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/calm"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".PiktuurMain" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" >

        <Button
            android:id="@+id/takepic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/round" />

        <Button
            android:id="@+id/editpic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_weight="1"
            android:background="@drawable/round" />

        <Button
            android:id="@+id/sharepic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/round"
            android:drawableStart="@android:drawable/ic_dialog_email" />
    </LinearLayout>
</RelativeLayout>

- erp

---

在XML中使用CTRL+SHIFT+F进行格式化 ;) - Pratik Butani

Answer 1

使用图像按钮：

<ImageButton
        android:id="@+id/sharepic"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@drawable/round"
        android:src="@android:drawable/ic_dialog_email"
        />

- ianhanniballake

Answer 2

您可以使用MaterialButton，它比其他类似组件具有更多的优势。例如：涟漪效果、主题、图标着色、形状外观等等。

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    app:icon="@drawable/ic_baseline_sports_soccer_24"
    app:iconPadding="0dp" />

<androidx.appcompat.widget.AppCompatImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_baseline_sports_soccer_24" />

此外，您应该设置 android:padding="Xdp" 来适配宽度。

- beigirad

---

最佳答案是获取一个简单的仅图标材料按钮。谢谢！ :) - Damercy

如果你将minWidth="0dp"设置为0dp，那么你就不会有48dp的最小宽度和高度。 - undefined

Answer 3

您可以使用ImageButton代替Button。下面我展示了footer布局。

<LinearLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="0dp"
        android:background="@drawable/trans_bg"
        android:gravity="center"
        android:padding="5dp" >

        <LinearLayout
            android:id="@+id/ib_add_ed_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_add"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/add_event_button_back" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ib_map_ed_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_map"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/map_button_back" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ib_call_cd_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_get_route"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/route_button_back" />
        </LinearLayout>
    </LinearLayout>

在 `values\styles.xml` 中添加 `style`。保留 HTML，不做解释。

 <style name="Bottombar2LinearLayout">
    <item name="android:layout_width">30dp</item>
    <item name="android:layout_height">30dp</item>
    <item name="android:layout_marginLeft">40dp</item>
    <item name="android:layout_marginRight">40dp</item>
    <item name="android:layout_marginBottom">1dp</item>
    <item name="android:layout_marginTop">1dp</item>
</style>

输出:

- M D

Answer 4

如今，Material Design的图标按钮是一种方便的方式来实现这一点。
只需包含适当的样式并提供图标即可。

<Button
    android:id="@+id/btnLike"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.Material3.Button.IconButton.Outlined"
    app:icon="@drawable/ic_heart_outline" />

- MatHazak