- 1. Create a new android project
- 2. Add ViewPager and TabLayout widget to the layout of the activity i.e main_activity.xml
- 3. Initialize the UI components in MainActivity.java
- 4. Lets create the fragments to be used as pages for the viewpager.
- 5. Create an adapter for the viewpager.
- 6. Set the adapter to the viewpager
- 7. Link the tablayout to the viewpager
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
package com.droidmonk.viewpagerdemo; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private TabLayout mTabs; private ViewPagerAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /*Initialize UI*/ mViewPager= (ViewPager) findViewById(R.id.view_pager); mTabs= (TabLayout) findViewById(R.id.tabs); /*Create the adapter*/ mAdapter=new ViewPagerAdapter(getSupportFragmentManager()); mAdapter.addFragment(FrPageOne.newInstance(),getResources().getString(R.string.fr_1)); mAdapter.addFragment(FrPageTwo.newInstance(),getResources().getString(R.string.fr_2)); mAdapter.addFragment(FrPageThree.newInstance(),getResources().getString(R.string.fr_3)); /*Add the adapter to the viewpager*/ mViewPager.setAdapter(mAdapter); /*Link the tab to the viewpager*/ mTabs.setupWithViewPager(mViewPager); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tabs" /> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/view_pager" /> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
package com.droidmonk.viewpagerdemo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.PagerAdapter; import android.view.View; import java.util.ArrayList; import java.util.List; /** * Created by DroidMonk on 14-08-2017. */ class ViewPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mPages; private List<String> mTitles; ViewPagerAdapter(FragmentManager fm) { super(fm); mPages=new ArrayList<>(); mTitles=new ArrayList<>(); } void addFragment(Fragment page, String title) { mPages.add(page); mTitles.add(title); } @Override public Fragment getItem(int position) { return mPages.get(position); } @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); } @Override public int getCount() { return mPages.size(); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
package com.droidmonk.viewpagerdemo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FrPageOne extends Fragment { public FrPageOne() { // Required empty public constructor } public static FrPageOne newInstance() { Bundle args = new Bundle(); FrPageOne fragment = new FrPageOne(); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_page_one, container, false); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<FrameLayout 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:background="@color/colorAccent" tools:context="com.droidmonk.viewpagerdemo.FrPageOne"> <TextView android:layout_gravity="center" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fr_1" /> </FrameLayout> |