Renderings as follows, this example USES the Androidx under the viewpager and com. Google. Android. Material. The tabs. The implementing correlation TabLayout statement: all this example based on Androidx expansion pack development

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;
Copy the code

Solution:

The root layout acvitity_main

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <androidx.viewpager.widget.ViewPager android:id="@+id/vp_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </androidx.viewpager.widget.ViewPager> <View android:layout_width="match_parent" Android: layout_height = "0.5 dp" android: alpha = "0.6" android: background = "@ android: color/darker_gray" > < / View > <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="55dp" app:tabIndicatorHeight="0dp" app:tabIndicatorFullWidth="false" app:tabIndicatorGravity="center" app:tabMaxWidth="0dp" app:tabMode="fixed" app:tabGravity="fill" app:tabRippleColor="@android:color/transparent" app:tabSelectedTextColor="@android:color/black" app:tabTextColor="@android:color/darker_gray"> </com.google.android.material.tabs.TabLayout> </LinearLayout>Copy the code

HomeFragment (for example, there are three fragments)

package com.kz.xk.fragment;


import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.kz.xk.R;

/**
 * A simple {@link Fragment} subclass.
 */
public class HomeFragment extends Fragment {
   private String mFrom;

    public HomeFragment() {
        // Required empty public constructor
    }

    public static Fragment newInstance(String from){
        HomeFragment homeFragment = new HomeFragment();
        Bundle bundle = new Bundle();
        bundle.putString("from",from);
        homeFragment.setArguments(bundle);
        return homeFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null){
            mFrom = (String) getArguments().get("from");
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_home, container, false);

        return view;
    }

}
Copy the code

Tool DataGenerator

package com.kz.xk.view; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import androidx.fragment.app.Fragment; import com.kz.xk.R; import com.kz.xk.fragment.HomeFragment; import com.kz.xk.fragment.MeFragment; import com.kz.xk.fragment.StudyFragment; import java.util.ArrayList; import java.util.List; public class DataGenerator { public static final int []mTabRes = new int[]{R.drawable.lesson_default,R.drawable.study_default,R.drawable.personal_default}; public static final int []mTabResPressed = new int[]{R.drawable.lesson_selected,R.drawable.study_selected,R.drawable.personal_selected}; Public static final String[] mTabTitle = new String[] public static final String[] mTabTitle = new String[]; public static List<Fragment> getFragments(String from){ List<Fragment> fragments = new ArrayList<>(); fragments.add(HomeFragment.newInstance(from)); fragments.add(StudyFragment.newInstance(from)); fragments.add(MeFragment.newInstance(from)); return fragments; } @param context @param position @return */ public static View getTabView(context context, int position){ View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null); ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image); tabIcon.setImageResource(DataGenerator.mTabRes[position]); TextView tabText = (TextView) view.findViewById(R.id.tab_content_text); tabText.setText(mTabTitle[position]); return view; }}Copy the code

FragmentPagerAdapter

package com.kz.xk.adapter;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyViewPagerAdapter extends FragmentPagerAdapter {
   private  List<Fragment> fragments;

    public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        fragment = fragments.get(position);
        Bundle bundle = new Bundle();
        bundle.putString("id",""+position);
        if (fragment != null) {
            fragment.setArguments(bundle);
        }
//        return fragments.get(position);
        return fragment;
    }

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

}
Copy the code

Customize the item layout home_tab_content for the bottom navigation

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/tab_content_image" android:layout_width="wrap_content" android:layout_height="25dp" android:scaleType="centerInside" /> <TextView android:id="@+id/tab_content_text" android:layout_width="wrap_content" android:layout_height="25dp" android:textSize="14sp" android:textColor="@android:color/darker_gray" /> </LinearLayout>Copy the code

Implement MainAcvitity

package com.kz.xk; import android.graphics.Color; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.viewpager.widget.ViewPager; import com.google.android.material.tabs.TabLayout; import com.kz.xk.adapter.MyViewPagerAdapter; import com.kz.xk.fragment.HomeFragment; import com.kz.xk.fragment.MeFragment; import com.kz.xk.fragment.StudyFragment; import com.kz.xk.view.DataGenerator; import java.util.ArrayList; import java.util.List; import butterknife.BindView; public class MainActivity extends AppCompatActivity { private List<Fragment> mFragmensts = new ArrayList<>(); private MyViewPagerAdapter adapter; private static final String TAG = "MainActivity"; @BindView(R.id.tab_layout) TabLayout mTabLayout; @BindView(R.id.vp_container) ViewPager view_pager; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { mTabLayout = findViewById(R.id.tab_layout); view_pager = findViewById(R.id.vp_container); // mFragmensts = DataGenerator.getFragments("TabLayout Tab"); mFragmensts.add(new HomeFragment()); mFragmensts.add(new StudyFragment()); mFragmensts.add(new MeFragment()); adapter = new MyViewPagerAdapter(getSupportFragmentManager(),mFragmensts); view_pager.setAdapter(adapter); view_pager.setOffscreenPageLimit(2); view_pager.setCurrentItem(0,false); for(int i=0; i<3; i++){ mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i))); } chooseFirst(); mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { Log.e(TAG, "onTabSelected: " + tab.getPosition()); view_pager.setCurrentItem(tab.getPosition(),true); recoverItem(); View view =tab.getCustomView(); ImageView imageView = view.findViewById(R.id.tab_content_image); TextView textView = view.findViewById(R.id.tab_content_text); imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabResPressed[tab.getPosition()])); textView.setTextColor(getResources().getColor(R.color.colorAccent)); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) {}}); view_pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout)); } /** * init */ private void chooseFirst(){tabLayout.tab = mTabLayout.gettabat (0); View view =tabAt.getCustomView(); ImageView imageView = view.findViewById(R.id.tab_content_image); TextView textView = view.findViewById(R.id.tab_content_text); imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabResPressed[0])); textView.setTextColor(getResources().getColor(R.color.colorAccent)); } /** * restores the default */ private void recoverItem() {for (int I = 0; i < 3; i++) { TabLayout.Tab tabAt = mTabLayout.getTabAt(i); View view =tabAt.getCustomView(); ImageView imageView = view.findViewById(R.id.tab_content_image); TextView textView = view.findViewById(R.id.tab_content_text); imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabRes[i])); textView.setTextColor(Color.GRAY); }}}Copy the code