Android Studio LinearLayout布局：行内多按钮与垂直布局共存实现

核心思路是外层用横向布局承载多个独立的垂直图文容器，每个容器内部垂直排列图片和文字，既满足整体横向排列的需求，又能实现单个按钮内文字在图片下方的效果。

方法1：LinearLayout嵌套实现（最直观） #

通过两层LinearLayout嵌套：外层设为横向，每个子项是垂直LinearLayout，内部放置ImageView和TextView，同时给子容器添加点击事件模拟按钮行为。

示例代码：

<!-- 外层横向布局，承载所有图文按钮 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:padding="16dp"
    android:gap="16dp"> <!-- 按钮之间的间距，API29+支持，低版本可用layout_margin替代 -->

    <!-- 第一个图文按钮容器 -->
    <LinearLayout
        android:id="@+id/cash_app_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:background="?attr/selectableItemBackground" <!-- 点击波纹效果 -->
        android:padding="8dp">

        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/ic_cash_app" /> <!-- 替换为你的图片资源 -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="cash app"
            android:layout_marginTop="4dp"
            android:textSize="12sp" />
    </LinearLayout>

    <!-- 第二个图文按钮容器，结构与第一个一致 -->
    <LinearLayout
        android:id="@+id/another_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:background="?attr/selectableItemBackground"
        android:padding="8dp">

        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/ic_another" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Another App"
            android:layout_marginTop="4dp"
            android:textSize="12sp" />
    </LinearLayout>

</LinearLayout>

方法2：用Button自带属性简化（适合简单场景） #

如果只是需要基础的图+文字按钮，可直接用Button控件，通过drawableTop属性设置顶部图片，文字会自动显示在图片下方，外层仍用横向LinearLayout排列多个Button。

示例代码：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:padding="16dp"
    android:gap="16dp">

    <Button
        android:id="@+id/cash_app_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="cash app"
        android:drawableTop="@drawable/ic_cash_app"
        android:drawablePadding="4dp"
        android:textSize="12sp" />

    <Button
        android:id="@+id/another_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Another App"
        android:drawableTop="@drawable/ic_another"
        android:drawablePadding="4dp"
        android:textSize="12sp" />

</LinearLayout>

关键说明 #

• 外层横向布局负责整体按钮的横向排列，gravity="center"可让按钮在布局内居中对齐。
• 每个图文单元的垂直布局（或Button）负责内部图片和文字的垂直居中排列，保证视觉美观。
• 给容器设置clickable="true"和background="?attr/selectableItemBackground"，能实现类似原生按钮的点击反馈，提升交互体验。

内容的提问来源于stack exchange，提问作者Brett Hudson