The icon in the middle is convex and concave, similar to Zhihu’s tablayout

The icon in the middle is convex and concave, similar to Zhihu’s tablayout

Up ui
1, xml code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4F4F6"
    android:orientation="vertical"
    tools:context=".activity.MainActivity">

    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="56dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="94dp"
        android:layout_gravity="bottom"
        android:background="@drawable/home_layout_bg"
        android:baselineAligned="false"
        android:gravity="center">

        <LinearLayout
            android:id="@+id/ll_detail_ft"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_marginTop="18dp"
            android:layout_weight="1"
            android:background="@drawable/mine_onclick_bg"
            android:gravity="center"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/iv_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/detail1_v1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="3dp"
                android:text="明细"
                android:textColor="@color/tab_text_color_selected" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_chart_ft"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_marginTop="18dp"
            android:layout_weight="1"
            android:background="@drawable/mine_onclick_bg"
            android:gravity="center"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/iv_chart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/chart_v2" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_chart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="3dp"
                android:text="图表" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_accounting_ft"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/home_add_v1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_accounting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:paddingTop="4dp"
                android:text="记账" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_account_ft"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_marginTop="18dp"
            android:layout_weight="1"
            android:background="@drawable/mine_onclick_bg"
            android:gravity="center"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/iv_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/account_v2" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="3dp"
                android:text="账户" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_my_ft"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_marginTop="18dp"
            android:layout_weight="1"
            android:background="@drawable/mine_onclick_bg"
            android:gravity="center"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/iv_my"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/me2_v1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_my"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="3dp"
                android:text="我的" />

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

2. Add the code to the corresponding page

class MainActivity : BaseActivity() {

    var detailFragment = DetailFragment()//明细
    var chartFragment = ChartFragment()//图表
    var accountFragment = AccountFragment()//账户
    var myFragment = MyFragment()//我的

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var beginTransaction = supportFragmentManager.beginTransaction()
        beginTransaction.add(R.id.fl_container, detailFragment)
        beginTransaction.add(R.id.fl_container, chartFragment)
        beginTransaction.add(R.id.fl_container, accountFragment)
        beginTransaction.add(R.id.fl_container, myFragment)

        beginTransaction.show(detailFragment)
        beginTransaction.hide(chartFragment)
        beginTransaction.hide(accountFragment)
        beginTransaction.hide(myFragment)
        beginTransaction.commit()

        ll_detail_ft.setOnClickListener {
            var beginTransaction = supportFragmentManager.beginTransaction()
            beginTransaction.show(detailFragment)
            beginTransaction.hide(chartFragment)
            beginTransaction.hide(accountFragment)
            beginTransaction.hide(myFragment)
            beginTransaction.commit()
            //改变图片文字
            iv_detail.setImageDrawable(getDrawable(R.drawable.detail1_v1))
            tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_selected))
            iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
            tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
            tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
            tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
        }

        ll_chart_ft.setOnClickListener {
            var beginTransaction = supportFragmentManager.beginTransaction()
            beginTransaction.hide(detailFragment)
            beginTransaction.show(chartFragment)
            beginTransaction.hide(accountFragment)
            beginTransaction.hide(myFragment)
            beginTransaction.commit()

            //改变图片文字
            iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
            tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v1))
            tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_selected))
            tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
            tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
            tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
        }

        ll_accounting_ft.setOnClickListener {
            //记账
            var intent = Intent(this, AccountingActivity().javaClass)
            startActivity(intent)
        }

        ll_account_ft.setOnClickListener {
            var beginTransaction = supportFragmentManager.beginTransaction()
            beginTransaction.hide(detailFragment)
            beginTransaction.hide(chartFragment)
            beginTransaction.show(accountFragment)
            beginTransaction.hide(myFragment)
            beginTransaction.commit()

            //改变图片文字
            iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
            tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
            tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_account.setImageDrawable(getDrawable(R.drawable.account_v1))
            tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_selected))
            iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
            tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
        }

        ll_my_ft.setOnClickListener {
            var beginTransaction = supportFragmentManager.beginTransaction()
            beginTransaction.hide(detailFragment)
            beginTransaction.hide(chartFragment)
            beginTransaction.hide(accountFragment)
            beginTransaction.show(myFragment)
            beginTransaction.commit()

            //改变图片文字
            iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
            tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
            tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
            tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_unselected))
            iv_my.setImageDrawable(getDrawable(R.drawable.me1_v1))
            tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
                R.color.tab_text_color_selected))
        }

    }

}

The tabs below the image will not block the data.