網上花時間找了很久，沒有一個人給出詳實好用的解決方案，都是隻給出瞭如何畫出來凸出的效果，卻沒有解決如何能點選凸出的部分，先上封裝好Demo的效果動圖，點選凸出按鈕，然後跳轉到下一個介面：

         如果只是畫出來，可以參考我上一篇博文：https://blog.csdn.net/Crystal_xing/article/details/85101594，但是如果點選，用網上主流的讓子控制元件超過父佈局的方法就行不通了，就要更改介面的畫法，用兩層layout去實現這個底部導航欄，將文字和導航欄的背景圖都用常規的一個layout去繪製，然後用一個非常規的透明的layout，去裝載兩個凸出的按鈕，然後將上面透明的layout往下偏移若干距離，疊加在下面的常規layout上面，做到部分的覆蓋，preview預覽圖如下：

                                                                   1.  preview介面預覽圖 

 下面貼出整個佈局的完整程式碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:clipChildren="false">

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/lay_tool"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@mipmap/bg_camera_nav"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/img_device_state"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:layout_weight="1"
                android:src="@mipmap/switch_off"/>

            <ImageView
                android:id="@+id/img_network_state"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:layout_weight="1"
                android:src="@mipmap/network_on"/>

            <ImageView
                android:id="@+id/img_face_switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:layout_weight="1"
                android:src="@mipmap/face_on"/>

            <ImageView
                android:id="@+id/img_car_switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:layout_weight="1"
                android:src="@mipmap/car_off"/>

            <ImageView
                android:id="@+id/img_camera_turn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:layout_weight="1"
                android:src="@mipmap/camera_turn"/>

        </LinearLayout>

    </FrameLayout>



    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@mipmap/bottom_navbar_bg"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:clipChildren="false">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="設定"
                android:gravity="center_horizontal|bottom"
                android:textSize="14sp"
                android:layout_marginLeft="25dp"
                android:layout_marginBottom="10dp"
                android:textColor="@color/blue" />

        </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="智慧監察"
            android:textSize="18sp"
            android:textColor="@color/blue"
            android:gravity="center"/>

    </LinearLayout>


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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="檢視"
                android:gravity="center_horizontal|bottom"
                android:textSize="14sp"
                android:layout_marginRight="1dp"
                android:layout_marginBottom="10dp"
                android:textColor="@color/blue" />

        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/ll_upbottom"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/transparent"
        android:layout_above="@id/ll_bottom"
        android:layout_marginBottom="-17dp"
        android:orientation="horizontal"
        android:clipChildren="false">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1">
            <RelativeLayout
                android:layout_width="100dp"
                android:layout_height="130dp"
                android:layout_marginLeft="30dp"
                android:gravity="center">
                <ImageView
                    android:id="@+id/img_setting"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:src="@mipmap/icon_setting" />
            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="智慧監察"
                android:textSize="18sp"
                android:visibility="gone"
                android:textColor="@color/blue"
                android:gravity="center"/>

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1">
            <RelativeLayout
                android:layout_width="100dp"
                android:layout_height="130dp"
                android:gravity="center">
                <ImageView
                    android:id="@+id/img_watch"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:src="@mipmap/icon_setting" />
            </RelativeLayout>

        </LinearLayout>


    </LinearLayout>


</RelativeLayout>

   Demo已上傳：https://download.csdn.net/download/crystal_xing/10863993