先看效果

网络图片（使用第三方库Glide加载图片）

GIF1.gif

本地图片

GIF2.gif

使用方法

xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配)

activity_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_tab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.hightsstudent.highsstudent.ui.activity.TabActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.~~~~~~.CustomizeTabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="#F1F1F1"
        />


</LinearLayout>

layout_coutomizetab_top.xml

<?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="wrap_content"
    android:paddingTop="10px"
    android:paddingBottom="10px"
    >

    <ImageView
        android:id="@+id/iv_tab_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
         />

    <TextView
        android:id="@+id/tv_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_tab_icon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5px"
        android:singleLine="true"
        android:textSize="15sp" />


</RelativeLayout>

TabActivity

mTabbeans.add(new TabBean(mTitles[i], null,null, mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
TabBean参数详解
参数1：Tab标题文字
参数2：选中Tab的网络图片地址（null为不加载网络图片）
参数3：未选中Tab的网络图片地址（null为不加载网络图片）
参数4：选中Tab字体的颜色
参数5：未选中Tab字体的颜色
参数6：选中Tab的本地图片地址
参数7：未选中Tab的本地图片地址

public class TabActivity extends BaseActivity {
    private ArrayList<TabBean> mTabbeans = new ArrayList<>();
    private ArrayList<Fragment> mFragments = new ArrayList<>();

    private String[] mTitles = {"首页", "关于", "消息", "我的"};

    private int[] mUnSelectIcons = {
            R.drawable.tab_home_unselect,R.drawable.tab_more_unselect, R.drawable.tab_speech_unselect, R.drawable.tab_contact_unselect};
    private int[] mSelectIcons = {
            R.drawable.tab_home_select,R.drawable.tab_more_select,  R.drawable.tab_speech_select,R.drawable.tab_contact_select};

    private int mSelectColor = Color.BLUE;
    private int mUnSelectColor = Color.BLACK;

    private String[] mSelectUrls={"http://pic38.nipic.com/20140307/2531170_074502124000_2.jpg",
            "http://pic72.nipic.com/file/20150719/9583477_022559838000_2.jpg",
            "http://img1.imgtn.bdimg.com/it/u=1283566983,3267885599&fm=21&gp=0.jpg",
            "http://pic38.nipic.com/20140307/2531170_074502124000_2.jpg"};
    private String[] mUnSelectUrls={"http://img.taopic.com/uploads/allimg/110419/2376-11041Z15S685.jpg",
            "http://pic.taopic.com/uploads/allimg/140627/240424-14062G2544388-lp.jpg",
            "http://pic42.nipic.com/20140628/19074191_112631798000_2.jpg",
            "http://pic74.nipic.com/file/20150807/21290976_162220169617_2.jpg"};
    private ViewPager mViewPager;
    private CustomizeTabLayout mTabLayout;


    @Override
    protected int getOverridePendingTransitionMode() {
        return RIGHT;
    }
    @Override
    protected int getLayoutId() {
        return R.layout.activity_tab;
    }

    @Override
    protected void initView() {
        mTabLayout = getView(R.id.tabLayout);
        mViewPager = getView(R.id.vp_container);

        for (int i = 0; i < mTitles.length; i++) {
//            mTabbeans.add(new TabBean(mTitles[i], mSelectUrls[i],mUnSelectUrls[i], mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
            mTabbeans.add(new TabBean(mTitles[i], null,null, mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
        }
        mFragments.add(new HomeFragment());
        mFragments.add(new TalkaboutFragment());
        mFragments.add(new MessageFragment());
        mFragments.add(new MineFragment());
    }

    @Override
    protected void setListener() {

    }

    @Override
    protected boolean isActionBar() {
        return false;
    }

    @Override
    protected void initDate() {
        mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        initFragmentViewpager();

    }

    private class MyPagerAdapter extends FragmentPagerAdapter {
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
    }

    private void initFragmentViewpager() {
        mTabLayout.setTabDate(mTabbeans);
        mTabLayout.setmListener(new CustomizeTabLayout.OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                mViewPager.setCurrentItem(position, false);
            }
            /**
             * 连续点击调用此方法
             */
            @Override
            public void onTabReselect(int position) {

            }
        });

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                mTabLayout.setCurrentTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

}

自定义Tab CustomizeTabLayout.java

如要配置鸿洋大神的完美适配需要extendsAutoFrameLayout

mTabLinearLayout=new LinearLayout(context); 修改成mTabLinearLayout=new AutoLinearLayout(context);即可

/**
 * Created by Dengxiao on 2016/11/4.
 */

public class CustomizeTabLayout extends FrameLayout {
    private  LinearLayout mTabLinearLayout;
    private Context mContext;
    private ArrayList<TabBean> mTabBeans=new ArrayList<>();
    private int mTabCount;
    private int mCurrentTab;
    private OnTabSelectListener mListener;
    private int mLastTab;

    public void setmListener(OnTabSelectListener mListener) {
        this.mListener = mListener;
    }

    public CustomizeTabLayout(Context context) {
        this(context,null,0);
    }

    public CustomizeTabLayout(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public CustomizeTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext=context;
        mTabLinearLayout=new LinearLayout(context);
        addView(mTabLinearLayout);
    }

    //添加导航栏数据
    public void setTabDate(ArrayList<TabBean> tabBeans){
        if (tabBeans == null || tabBeans.size() == 0) {
            throw new IllegalStateException("TabEntitys can not be NULL or EMPTY !");
        }
        this.mTabBeans.clear();
        this.mTabBeans.addAll(tabBeans);
        notifyDataSetChanged();
    }

    //更新数据
    private void notifyDataSetChanged() {
        mTabLinearLayout.removeAllViews();
        this.mTabCount=mTabBeans.size();
        View tabView;
        for(int i=0;i<mTabCount;i++){
            tabView = View.inflate(mContext, R.layout.layout_coutomizetab_top, null);
            tabView.setTag(i);
            addTab(i,tabView);
        }
        setCurrentTab(0);
    }
    /** 创建并添加tab */
    private void addTab(final int position, View tabView) {
        TextView tv_tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
        tv_tab_title.setText(mTabBeans.get(position).getTitle());
        ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
        int unSelectIcon = mTabBeans.get(position).getUnSelectIcon();
        String unSelectUrl = mTabBeans.get(position).getUnSelectUrl();
        String SelectUrl = mTabBeans.get(position).getSelectUrl();
        if(android.text.TextUtils.isEmpty(unSelectUrl)||android.text.TextUtils.isEmpty(SelectUrl)){
            iv_tab_icon.setImageResource(unSelectIcon);
        }else{
            Glide.with(mContext).load(unSelectUrl).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(unSelectIcon).into(iv_tab_icon);
        }
        tabView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = (Integer) v.getTag();
                if (mCurrentTab != position) {
                    setCurrentTab(position);
                    if (mListener != null) {
                        mListener.onTabSelect(position);
                    }
                } else {
                    if (mListener != null) {
                        mListener.onTabReselect(position);
                    }
                }
            }
        });
        LinearLayout.LayoutParams lp_tab =  new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1.0f);
        mTabLinearLayout.addView(tabView, position, lp_tab);
    }

    public void setCurrentTab(int currentTab) {
        mLastTab = this.mCurrentTab;
        this.mCurrentTab = currentTab;
        updateTabSelection(currentTab);
    }

    //更新tab
    private void updateTabSelection(int position) {
        for (int i = 0; i < mTabCount; ++i) {
            View tabView = mTabLinearLayout.getChildAt(i);
            final boolean isSelect = i == position;
            TabBean tabBean = mTabBeans.get(i);
            TextView tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
            tab_title.setTextColor(isSelect ? tabBean.getSelectTextColor() :tabBean.getUnSelectTextColor());
            ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
            if(android.text.TextUtils.isEmpty(tabBean.getSelectUrl())||android.text.TextUtils.isEmpty(tabBean.getUnSelectUrl())){
                iv_tab_icon.setImageResource(isSelect ? tabBean.getSelectIcon() : tabBean.getUnSelectIcon());
            }else{
                Glide.with(mContext).load(isSelect?tabBean.getSelectUrl():tabBean.getUnSelectUrl()).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(isSelect?tabBean.getSelectIcon():tabBean.getUnSelectIcon()).into(iv_tab_icon);
            }
        }
    }


    public interface OnTabSelectListener {
        void onTabSelect(int position);
        void onTabReselect(int position);
    }
}

Glide需在build.gradle配置

dependencies {   
compile 'com.github.bumptech.glide:glide:3.7.0'
}

别忘记添加权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

以上贴出全部代码