This article shows you how to create tab layout using fragments and viewpager. Also you can swipe between tab view as it is the functionality of viewpager which is not possible when using TabHost.
Before getting into this tutorial it is suggested to have knowledge on Fragments and ViewPager as these two are main concepts used here. My previous article explains about the usage and implementation of fragments.
Basically we are using ViewPager as main layout and for individual pager views we use Fragments. The tabs are part of Action Bar.
In this example i will demonstrate you how to work on swipeable tabs using view pager.
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken viewpager for implementing swipeable tabs.
1 2 3 4 5 6 |
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"/> |
3. Now, create three more layout xml files for fragments. I am going to use three fragments so i made three layouts for fragments and named as fragments_a.xml, frgament_b.xml and fragment_c.xml.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFCC00" > <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:textColor="#ffffff" android:textStyle="bold" android:text="THIS IS FRAGMENT A" /> </FrameLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF0000" > <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:textStyle="bold" android:textColor="#ffffff" android:text="THIS IS FRAGMENT B" /> </FrameLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF6600" > <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:textColor="#ffffff" android:text="THIS IS FRAGMENT C" android:textStyle="bold" /> </FrameLayout> |
4. Now, make three java files for all fragments naming FragmentA.java, FragmentB.java and FragmentC.java. In this java files just return the view(layout) that you want to show as done in earlier tutorial.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package com.viewpager_fragment_tab_demo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentA extends Fragment { public FragmentA() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_a, container, false); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
package com.viewpager_fragment_tab_demo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentB extends Fragment { public FragmentB() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_b, container, false); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
package com.viewpager_fragment_tab_demo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentC extends Fragment { public FragmentC() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_c, container, false); } } |
5. Finally, add the following code to your MainActivity.java. In this activity i am going to show how to make tabs and implement fragments and also to swipe between the tabs.
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
package com.viewpager_fragment_tab_demo; import android.annotation.TargetApi; import android.app.ActionBar; import android.os.Build; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.app.FragmentTransaction; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBarActivity; @TargetApi(Build.VERSION_CODES.HONEYCOMB) public class MainActivity extends ActionBarActivity implements android.support.v7.app.ActionBar.TabListener { ViewPager viewPager; // Using appcompat action bar private android.support.v7.app.ActionBar actionBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // View pager for showing many fragments over a single activity viewPager = (ViewPager) findViewById(R.id.pager); // Getting fragment manager to control fragments FragmentManager fragmnetManager = getSupportFragmentManager(); // Setting adapter over view pager viewPager.setAdapter(new MyAdapter(fragmnetManager)); // Implementing view pager pagechangelistener to navigate between tabs viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int pos) { // Setting navigation of tabs to actionbar actionBar.setSelectedNavigationItem(pos); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); // Getting actionbar actionBar = getSupportActionBar(); // Setting navigation mode to actionbar actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Now adding a new tab to action bar and setting title, icon and // implementing listener android.support.v7.app.ActionBar.Tab tab1 = actionBar.newTab(); tab1.setText("TAB1"); // tab1.setIcon(R.drawable.ic_launcher); tab1.setTabListener(this); android.support.v7.app.ActionBar.Tab tab2 = actionBar.newTab(); tab2.setText("TAB2"); tab2.setTabListener(this); android.support.v7.app.ActionBar.Tab tab3 = actionBar.newTab(); tab3.setText("TAB3"); tab3.setTabListener(this); // Now finally adding all tabs to actionbar actionBar.addTab(tab1); actionBar.addTab(tab2); actionBar.addTab(tab3); } @Override public void onTabReselected(android.support.v7.app.ActionBar.Tab arg0, FragmentTransaction arg1) { } @Override public void onTabSelected(android.support.v7.app.ActionBar.Tab tab, FragmentTransaction arg1) { // Setting current position of tab to view pager viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(android.support.v7.app.ActionBar.Tab arg0, FragmentTransaction arg1) { } } // My adapter i.e. custom adapter for displaying fragments over view pager class MyAdapter extends FragmentPagerAdapter { public MyAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { // Getting fragments according to selected position Fragment fragment = null; if (i == 0) { fragment = new FragmentA(); } if (i == 1) { fragment = new FragmentB(); } if (i == 2) { fragment = new FragmentC(); } // and finally returning fragments return fragment; } @Override public int getCount() { // Returning no. of counts of fragments return 3; } } |
6. Now, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.