Imitation of the bottom navigation bar of JD.com

We will often use the bottom navigation bar in the project, so how is the bottom navigation bar implemented? it's actually really easy:

I have extracted a demo of a mall class project here for your reference:

The activity code is as follows:

public class MainActivity extends AppCompatActivity {

    private LinearLayout mHomeLl;
    private LinearLayout mCartLl;
    private LinearLayout mMyLl;

    private int selectId = -1;

    private FragmentTransaction mFragmentTransaction;

    private Fragment homeFragment,cartFragment,myFragment,currentFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mHomeLl = (LinearLayout) findViewById(R.id.home_ll);
        mCartLl = (LinearLayout) findViewById(R.id.cart_ll);
        mMyLl = (LinearLayout) findViewById(R.id.my_ll);

        changeFragment(0);

        mHomeLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(0);
            }
        });

        mCartLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(1);
            }
        });

        mMyLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(2);
            }
        });
    }

    private void changeFragment(int i){

        if(selectId != -1 && selectId == i){
            return;
        }
        selectId = i;
        if (mFragmentTransaction == null) {
            mFragmentTransaction = getSupportFragmentManager().beginTransaction();
        }
        switch (i){
            case 0:
                if(homeFragment == null){
                    homeFragment = new HomeFragment();
                }
                switchFragment(homeFragment);
                break;
            case 1:
                if(cartFragment == null){
                    cartFragment = new CartFragment();
                }
                switchFragment(cartFragment);
                break;
            case 2:
                if(myFragment == null){
                    myFragment = new MyFragment();
                }
                switchFragment(myFragment);
                break;
        }

    }

    public void switchFragment(Fragment to) {
        if (mFragmentTransaction == null) {
            mFragmentTransaction = getSupportFragmentManager().beginTransaction();
        }
        if (currentFragment != to) {
            if (currentFragment == null) {
                mFragmentTransaction.add(R.id.fl_content, to).commit();
                currentFragment = to;
                mFragmentTransaction = null;
                return;
            }
            if (!to.isAdded()) {
                mFragmentTransaction.hide(currentFragment).add(R.id.fl_content, to).commit();
            } else {
                mFragmentTransaction.hide(currentFragment).show(to).commitAllowingStateLoss();
            }
        }
        currentFragment = to;
        mFragmentTransaction = null;
    }



}

The layout code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

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

        <FrameLayout
            android:id="@+id/fl_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#dddddd"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#ffffff"
        >

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

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/home_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/home"
                android:layout_gravity="center"
                />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:background="#cccccc"
            >

        </View>

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

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/cart_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/cart"
                android:layout_gravity="center"
                />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:background="#cccccc"
            >

        </View>

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

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/my_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/my"
                android:layout_gravity="center"
                />

        </LinearLayout>

    </LinearLayout>


</LinearLayout>

The last final rendering:

The 3 sliced ​​pictures in it, please ask the artist to help me, isn't it so easy? ^_^