BottomNavigationView 实现底部凸起菜单解决方案

最新推荐文章于 2025-07-15 15:05:24 发布

原创最新推荐文章于 2025-07-15 15:05:24 发布 · 7.4k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#BottomNavigationView #凸起菜单 #底部凸起菜单

Android 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在Android应用中定制BottomNavigationView的方法，通过精心设计的布局和Drawable资源，实现了一个具有独特视觉效果的底部导航栏，其中包括一个圆形菜单项，能够完美地与背景融合，同时确保与不同Android版本的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：
在这里插入图片描述
布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_with_view_pager"
    style="@style/title_all"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/sys_bg">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/ma_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:itemBackground="@null"
        app:menu="@menu/menu_navigation_guide" />

    <FrameLayout
        android:id="@+id/ma_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ma_navigation"
        android:background="@color/white" />

    <LinearLayout
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_above="@+id/ma_navigation"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="-5dp"
        android:background="@drawable/round_circle_white"
        android:elevation="8dp" />

    <ImageView
        android:id="@+id/ma_iv_index"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:elevation="8dp"
        android:scaleType="centerInside"
        android:src="@mipmap/main_index" />

</RelativeLayout>

关键背景：round_circle_white.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="40dp" />
            <stroke
                android:width="1px"
                android:color="@color/color_general_line" />
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="40dp"
                android:topRightRadius="40dp" />
        </shape>
    </item>
    <item android:top="35dp">
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="5dp" />
            <solid android:color="@color/white"></solid>
        </shape>
    </item>


</layer-list>

其中关键点在于利用LinearLayout 的-5dp 实现与背景round_circle_white 的item的5dp的高度进行重合，遮挡住BottomNavigationView 上边线，显示round_circle_white的弧形部分边线1px，这样就实现了边线的完美重叠过度。
注意在8.0和4.4上面，要去掉BottomNavigationView水波纹效果和选中背景效果，不然会无法沉浸到凸起的菜单，比较尴尬。