如何为Toolbar的NavigationIcon设置自定义布局？

因为setNavigationIcon()仅支持传入Drawable，无法直接添加文字，所以可以通过以下两种方式实现图标+下方文字的导航按钮：

方案1：直接在Toolbar内部添加自定义布局 #

修改navigation_bar.xml，在Toolbar中嵌入包含图标和文字的布局作为导航按钮：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:minHeight="?attr/actionBarSize"
    android:paddingStart="8dp">

    <!-- 自定义导航按钮：图标+文字 -->
    <LinearLayout
        android:id="@+id/custom_nav_btn"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:clickable="true"
        android:focusable="true">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_drawer"/>

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

</androidx.appcompat.widget.Toolbar>

在MainActivity.kt中设置点击逻辑（触发抽屉）：

// 清除默认导航图标，避免重叠
binding.navigationBar.toolbar.navigationIcon = null

// 绑定自定义导航按钮的点击事件
binding.navigationBar.customNavBtn.setOnClickListener {
    // 替换为你的抽屉打开逻辑，示例：
    drawerLayout.openDrawer(GravityCompat.START)
}

方案2：动态添加自定义布局到Toolbar #

先创建独立的导航项布局文件toolbar_nav_item.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:clickable="true"
    android:focusable="true"
    android:paddingHorizontal="8dp">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_drawer"/>

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

在MainActivity.kt中加载并添加到Toolbar：

binding.navigationBar.toolbar.navigationIcon = null

// 加载自定义导航布局
val navItemView = LayoutInflater.from(this).inflate(R.layout.toolbar_nav_item, binding.navigationBar.toolbar, false)
// 将布局添加到Toolbar的最左侧位置
binding.navigationBar.toolbar.addView(navItemView, 0)

// 设置点击事件
navItemView.setOnClickListener {
    drawerLayout.openDrawer(GravityCompat.START)
}

注意事项 #

• 必须清除默认的navigationIcon，防止自定义布局和默认图标重叠
• 可根据需求调整布局的padding、文字大小、图标尺寸，适配不同界面风格
• 确保自定义布局的clickable和focusable属性设为true，保证点击事件正常响应

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