Toolbar上方无法显示Button？Android布局问题求助

在RelativeLayout中，将基础Button放置在Toolbar元素之后，却无法看到本应显示的白色“随机播放”图标，但改用FloatingActionButton就能正常显示，相关XML代码如下：

问题代码片段 #

<Button
    android:id="@+id/btnRandom"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_marginEnd="10dp"
    android:background="@drawable/ic_shuffle"
>
</Button>

完整布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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="match_parent"
    android:background="@drawable/mxhbg"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start"
>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/mxhbg"
        android:orientation="vertical"
        android:weightSum="10"
    >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:orientation="horizontal"
        >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
            >

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/colorPrimary"
                    android:elevation="4dp"
                    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                ></androidx.appcompat.widget.Toolbar>

                <Button
                    android:id="@+id/btnRandom"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="10dp"
                    android:background="@drawable/ic_shuffle"
                >

                </Button>

            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9"
        >

            <ListView
                android:id="@+id/listviewsongs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@android:color/transparent"
                android:dividerHeight="10.0sp"
                android:padding="8dp"
            >

            </ListView>

        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
        >

            <Button
                android:id="@+id/hbtnpause"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:layout_toLeftOf="@+id/hbtnnext"
                android:background="@drawable/ic_play_circle"
            >

            </Button>

            <Button
                android:id="@+id/hbtnnext"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:background="@drawable/ic_next"
            >

            </Button>

            <Button
                android:id="@+id/hbtnprev"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:layout_toLeftOf="@+id/hbtnpause"
                android:background="@drawable/ic_prev"
            >

            </Button>

            <TextView
                android:id="@+id/txtnp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/hbtnprev"
                android:ellipsize="marquee"
                android:marqueeRepeatLimit="marquee_forever"
                android:padding="10dp"
                android:scrollHorizontally="true"
                android:singleLine="true"
                android:textColor="#fff"
                android:textSize="18sp"
                android:textStyle="bold"
            >

            </TextView>

        </RelativeLayout>
    </LinearLayout>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu"
    >

    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

解决办法 #

1. 调整Z轴层级（解决遮挡问题） #

你的Toolbar设置了android:elevation="4dp"，这个属性会让Toolbar在Z轴上的层级高于默认无elevation的Button，导致Button被遮挡。而FloatingActionButton默认有更高的elevation，所以能正常显示。

修改方案：给Button添加高于Toolbar的elevation值，比如：

android:elevation="5dp"

或者直接移除Toolbar的android:elevation="4dp"属性。

2. 清除Button默认背景（避免图标被覆盖） #

基础Button默认带有系统背景样式，可能会覆盖你设置的图标背景。可以通过以下方式解决：

• 添加android:backgroundTint="@null"，取消背景着色
• 设置Button为无边框样式：style="@style/Widget.AppCompat.Button.Borderless"

3. 更规范的做法：使用Toolbar的Menu #

Toolbar本身支持通过Menu添加按钮，这是Android的标准做法，无需额外在RelativeLayout中嵌套Button：

1. 在res/menu目录下创建菜单文件（比如menu_toolbar.xml）：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_shuffle"
        android:icon="@drawable/ic_shuffle"
        android:title="随机播放"
        app:showAsAction="always"/>
</menu>

2. 在Activity中加载并设置点击监听：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.inflateMenu(R.menu.menu_toolbar);
toolbar.setOnMenuItemClickListener(item -> {
    if (item.getItemId() == R.id.action_shuffle) {
        // 处理随机播放逻辑
        return true;
    }
    return false;
});

修改后的Button代码示例 #

<Button
    android:id="@+id/btnRandom"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_marginEnd="10dp"
    android:background="@drawable/ic_shuffle"
    android:elevation="5dp"
    style="@style/Widget.AppCompat.Button.Borderless"
/>

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