效果图

因为原来的代码底部导航栏使用的是：LinearLayout + ImageView + TextView 组合，所以：在这里用到了一个及其重要的属性：

android:clipChildren=”false”。（放在其父布局使其生效，达到想要的效果） 意为是否允许子View超出父View的范围，Boolean型true 、false ，默认true不允许；

下面整个xml文件：

<RelativeLayout 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:clipChildren="false"
    tools:context=".activity.MainActivity">
    <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/lin" />

    <LinearLayout
        android:id="@+id/lin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:elevation="10dp"
        android:background="#fff"
        android:gravity="bottom"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:id="@+id/ll_tab_one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_tab_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_tab_home_selected"/>
            <TextView
                android:id="@+id/tv_tab_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:paddingBottom="2dp"
                android:textColor="@color/colorAccent"
                android:text="首页"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_two"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_tab_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_tab_friend_normal"/>
            <TextView
                android:id="@+id/tv_tab_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:paddingBottom="2dp"
                android:text="通讯"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_three"
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_tab_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_tab_search_normal"/>
            <TextView
                android:id="@+id/tv_tab_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:paddingBottom="2dp"
                android:text="搜索"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_four"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_tab_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_tab_rank_normal"/>
            <TextView
                android:id="@+id/tv_tab_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:paddingBottom="2dp"
                android:text="笔记"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_five"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_tab_five"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_tab_person_normal"/>
            <TextView
                android:id="@+id/tv_tab_five"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:paddingBottom="2dp"
                android:text="个人"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

activity里的tab切换和平时是一样的：

private ArrayList<Fragment> fragments;
private FragmentTabAdapter tabAdapter;
onCreate方法里：

fragments = new ArrayList<>();
fragments.add(TabOneFragment.newInstance());
fragments.add(TabTwoFragment.newInstance());
fragments.add(TabThreeFragment.newInstance());
fragments.add(TabFourFragment.newInstance());
fragments.add(TabFiveFragment.newInstance());
tabAdapter = new FragmentTabAdapter(this, fragments, R.id.fl_layout);
/**
 *  底部导航栏的点击事件
 * @param view
 */
@OnClick({R.id.ll_tab_one,R.id.ll_tab_two,R.id.ll_tab_three,R.id.ll_tab_four,R.id.ll_tab_five})
public void onClicked(View view) {
    switch (view.getId()){
        case R.id.ll_tab_one:
            tabAdapter.setCurrentFragment(0);
            break;
        case R.id.ll_tab_two:
            tabAdapter.setCurrentFragment(1);
            break;
        case R.id.ll_tab_three:
            tabAdapter.setCurrentFragment(2);
            break;
        case R.id.ll_tab_four:
            tabAdapter.setCurrentFragment(3);
            break;
        case R.id.ll_tab_five:
            tabAdapter.setCurrentFragment(4);
            break;
    }
}
protected void initListener() {
    tabAdapter.setOnTabChangeListener(new FragmentTabAdapter.OnTabChangeListener() {
        @Override
        public void OnTabChanged(int index) {
            tvTabOne.setTextColor(getResources().getColor(R.color.col_gray));
            tvTabTwo.setTextColor(getResources().getColor(R.color.col_gray));
            tvTabThree.setTextColor(getResources().getColor(R.color.col_gray));
            tvTabFour.setTextColor(getResources().getColor(R.color.col_gray));
            tvTabFive.setTextColor(getResources().getColor(R.color.col_gray));

            ivTabOne.setImageResource(R.mipmap.ic_tab_home_normal);
            ivTabTwo.setImageResource(R.mipmap.ic_tab_friend_normal);
            ivTabThree.setImageResource(R.mipmap.ic_tab_search_normal);
            ivTabFour.setImageResource(R.mipmap.ic_tab_rank_normal);
            ivTabFive.setImageResource(R.mipmap.ic_tab_person_normal);

            switch (index){
                case 0:
                    tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary));
                    ivTabOne.setImageResource(R.mipmap.ic_tab_home_selected);
                    break;
                case 1:
                    tvTabTwo.setTextColor(getResources().getColor(R.color.colorPrimary));
                    ivTabTwo.setImageResource(R.mipmap.ic_tab_friend_selected);
                    break;
                case 2:
                    tvTabThree.setTextColor(getResources().getColor(R.color.colorPrimary));
                    ivTabThree.setImageResource(R.mipmap.ic_tab_search_selected);
                    break;
                case 3:
                    tvTabFour.setTextColor(getResources().getColor(R.color.colorPrimary));
                    ivTabFour.setImageResource(R.mipmap.ic_tab_rank_selected);
                    break;
                case 4:
                    tvTabFive.setTextColor(getResources().getColor(R.color.colorPrimary));
                    ivTabFive.setImageResource(R.mipmap.ic_tab_person_selected);
                    break;
            }

        }
    });
}

FragmentTabAdapter代码：
public class FragmentTabAdapter {
    private List<Fragment> fragments; // tab页面对应的Fragment
    private FragmentActivity fragmentActivity; // Fragment所在的Activity
    private int fragmentContentId; // Activity中所要被替换的区域的id
    private int currentTab; // 当前Tab页面索引
    private OnTabChangeListener onTabChangeListener;

    public FragmentTabAdapter(FragmentActivity fragmentActivity,
                              List<Fragment> fragments, int fragmentContentId) {
        this.fragments = fragments;
        this.fragmentActivity = fragmentActivity;
        this.fragmentContentId = fragmentContentId;
        // 默认显示第一页
        FragmentTransaction ft = fragmentActivity.getSupportFragmentManager()
                .beginTransaction();
        ft.add(fragmentContentId, fragments.get(0));
        try {
            ft.commitAllowingStateLoss();
        }catch (Exception e){
            e.printStackTrace();
        }
        if (null != onTabChangeListener)
            onTabChangeListener.OnTabChanged(0);
    }

    /**
     * 切换tab
     * @param idx
     */
    private void showTab(int idx) {
        for (int i = 0; i < fragments.size(); i++) {
            Fragment fragment = fragments.get(i);
            FragmentTransaction ft = obtainFragmentTransaction(idx);

            if (idx == i) {
                ft.show(fragment);
            } else {
                ft.hide(fragment);
            }
            ft.commitAllowingStateLoss();
        }
        currentTab = idx; // 更新目标tab为当前tab
    }

    /**
     * 获取带动画的FragmentTransaction
     * @param index
     * @return
     */
    private FragmentTransaction obtainFragmentTransaction(int index) {
        FragmentTransaction ft = fragmentActivity.getSupportFragmentManager()
                .beginTransaction();
        // 设置切换动画
//    if (index > currentTab) {
//       ft.setCustomAnimations(R.anim.slide_left_in, R.anim.slide_left_out);
//    } else {
//       ft.setCustomAnimations(R.anim.slide_right_in,
//             R.anim.slide_right_out);
//    }
        return ft;
    }

    public int getCurrentTab() {
        return currentTab;
    }

    public Fragment getCurrentFragment() {
        return fragments.get(currentTab);
    }

    public void setCurrentFragment(int idx) {
        Fragment fragment = fragments.get(idx);
        FragmentTransaction ft = obtainFragmentTransaction(idx);

        getCurrentFragment().onPause(); // 暂停当前tab
        // getCurrentFragment().onStop(); // 暂停当前tab
        if (fragment.isAdded()) {
            // fragment.onStart(); // 启动目标tab的onStart()
            fragment.onResume(); // 启动目标tab的onResume()
        } else {
            ft.add(fragmentContentId, fragment);
        }
        showTab(idx); // 显示目标tab
        ft.commitAllowingStateLoss();
        // 如果设置了切换tab额外功能功能接口
        if (null != onTabChangeListener) {
            onTabChangeListener.OnTabChanged(idx);
        }
    }

    public void setOnTabChangeListener(OnTabChangeListener onTabChangeListener) {
        this.onTabChangeListener = onTabChangeListener;
    }

    public interface OnTabChangeListener {
        public void OnTabChanged(int index);
    }

}