AndroidAPP top navigation bar Tab click and swipe left and right to switch interface

 

Most news apps in the APP market have a navigation menu. The navigation menu is a collection of labels. In the news app, each label indicates a category, which corresponds to a sub-page of the ViewPager control below .

With the iterative update of the version, many controls have been brought. The case mainly uses new controls such as TabLayout, ViewPage, RecyclerView, and CardView.

The effect is as shown in the figure:

 

The previous implementation method is: ViewPagerIndicator + Fragment + ViewPager combined to achieve

Please see the blog: ViewPagerIndicator implements news App navigation bar .

Today I mainly talk about another implementation method: TabLayout + Fragment + ViewPager

 

Add the dependencies required by the program:

 

compile 'com.android.support:design:23.2.1'
 compile 'com.android.support:recyclerview-v7:23.1.1'
 compile 'com.android.support:cardview-v7:23.2.1'

main layout

 

 

<?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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E0E0E0"
        app:tabIndicatorColor="@color/ind_red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/material_orange"
        app:tabTextColor="@android:color/black"
        app:tabIndicatorHeight="5dp"
        app:tabTextAppearance="@style/TabStyle"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

 

<?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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E0E0E0"
        app:tabIndicatorColor="@color/ind_red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/material_orange"
        app:tabTextColor="@android:color/black"
        app:tabIndicatorHeight="5dp"
        app:tabTextAppearance="@style/TabStyle"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

 

 

The Tablayout control contains many properties, such as tabIndicatorColor: the color properties of the horizontal line moving below the menu are not introduced one by one, and there are comments in the code.

Activity.Java

public class TabLessActivity extends AppCompatActivity {

    private TabLayout tabLayout = null;

    private ViewPager viewPager;

    private Fragment[] mFragmentArrays = new Fragment[5];

    private String[] mTabTitles = new String[5];

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.tab_layout);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.tab_viewpager);
        initView();
    }

    private void initView() {
        mTabTitles[0] = "Recommended";
        mTabTitles[1] = "Hotspots";
        mTabTitles[2] = "Technology";
        mTabTitles[3] = "Sports";
        mTabTitles[4] = "Health";
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //Set the distance of the tablayout from the top, bottom, left and right
        //tab_title.setPadding(20,20,20,20);
        mFragmentArrays[0] = TabFragment.newInstance();
        mFragmentArrays[1] = TabFragment.newInstance();
        mFragmentArrays[2] = TabFragment.newInstance();
        mFragmentArrays[3] = TabFragment.newInstance();
        mFragmentArrays[4] = TabFragment.newInstance();
        PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);
        //Bind ViewPager to TabLayout
        tabLayout.setupWithViewPager(viewPager);
    }
}

Fragment.java

 

public class TabFragment extends Fragment {

    public static Fragment newInstance() {
        TabFragment fragment = new TabFragment();
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recycler);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new RecyclerAdapter());
        return rootView;
    }
}

 

The technology is updating, we are making progress, and TabLayout realizes the tab navigation effect is simpler and more convenient than the previous methods.

 

 

Source code click to download