Fragment State Pager Adapter with Top Header Tabs using Fragment

Hi All, It looks very tough for those guys who are new in Android Development, but i would say that things becomes very handy when you gets used to of it. So Lets learn that how we can add Top Header Tabs in a Fragment with FragmentStatePager Adapter.

Add MainActivity.java

public class MainActivity extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new HomeFragment).commit();

}

}

Add HomeFragment.java

public class HomeFragment extends Fragment implements OnClickListener, OnPageChangeListener{

/*
* Views of home fragment
*/
private ViewPager mPager = null;
private TextView[] mBottomTabTextView = new TextView[2];
private TextView[] mBottomTabNameTextView = new TextView[2];
private static final int NUMBER_OF_VIEW_TO_ALIVE = 2;

/**
* @param isMyComicRequestSend : false to start mycomic request
*/

private HomePagerAdapter mAdapter = null;

/** Called when the activity is first created. */
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.home_screen null);
initialize(view);
registerListener();

setTabSelected(0);
mAdapter = new HomePagerAdapter(getActivity().getSupportFragmentManager());
mPager.setOffscreenPageLimit(NUMBER_OF_VIEW_TO_ALIVE);
mPager.setAdapter(mAdapter);

return view;
}

/**
* Initialize activity views
*/
public void initialize(View view) {
mPager = (ViewPager) view.findViewById(R.id.pager);
/*
* Initialize tab strips
*/
mBottomTabTextView[0] = (TextView) view.findViewById(R.id.txt_view_home_tab);
mBottomTabTextView[1] = (TextView) view.findViewById(R.id.txt_view_mycomic_tab);

/*
* Initialize bottom tab views
*/
mBottomTabNameTextView[0] = (TextView) view.findViewById(R.id.txt_view_tab_home);
mBottomTabNameTextView[1] = (TextView) view.findViewById(R.id.txt_view_tab_mycomic);

}

/**
* Called to register Listeners
*/
public void registerListener() {
// Add loop to register listener for Bottom tab image views
for (int i = 0; i < NUMBER_OF_VIEW_TO_ALIVE; i++) {
mBottomTabNameTextView[i].setOnClickListener(this);
}
mPager.setOnPageChangeListener(this);

}

/**
* Called to set the tab selected
* @param iPosition : Position of the Tab to be selected
*/
public void setTabSelected(int iPosition) {
boolean state = false;
/*
* Add loop for Adding selected and unselected drawable for the image view
*/
for (int i = 0; i < NUMBER_OF_VIEW_TO_ALIVE; i++) {
if (i == iPosition) {
mBottomTabNameTextView[i].setTextColor(getResources().getColor(R.color.dark_blue));
state = true;
} else {
mBottomTabNameTextView[i].setTextColor(getResources().getColor(R.color.black));
state = false;
}
mBottomTabTextView[i].setSelected(state);
}
}

/*
* @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrollStateChanged(int)
*/
@Override
public void onPageScrollStateChanged(int arg0) {
}

/*
* @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)
*/
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

/*
* @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int)
*/
@Override
public void onPageSelected(int iPosition) {
/*
* if network is available
*/
//if position is 1 i.e mycomic and sMyComicRequest send is false
// then send my comic request
setTabSelected(iPosition);
Toast.makeText(getActivity(), "FRAGMENT " + (iPosition + 1),Toast.LENGTH_SHORT).show();

}

/*
* Called on bottom image click
* @see android.view.View.OnClickListener#onClick(android.view.View)
*/
@Override
public void onClick(View iView) {
/*
* if bottom tabs are clicked
*/
setmPagerOnTabClick(iView.getId());
}

/**
* Called to set page position on corresponding image click
* @param iTabId : Bottom Tab (Image View) id
*/
public void setmPagerOnTabClick(int iTabId) {
/*
* Add loop to find the id
*/
for (int i = 0; i < 4; i++) {
/*
* If view id match, the set page position
*/
if (mBottomTabNameTextView[i].getId() == iTabId) {
mPager.setCurrentItem(i);
setTabSelected(i);
break;
}
}
}
}

Add HomePagerAdapter.java

public class HomePagerAdapter extends FragmentStatePagerAdapter {

/**
* Number of Fragment pages in the view pager
*/
private static final int NUMBER_OF_PAGES = 2;
private Fragment2 mFragment2 ;
private Fragment1 mFragment1;
@Override
public Object instantiateItem(View container, int position) {
return super.instantiateItem(container, position);
}

@Override
public Object instantiateItem(ViewGroup arg0, int arg1) {
return super.instantiateItem(arg0, arg1);
}
/**
* @return : Instance of {@link Fragment2}
*/
public Fragment2 getFragment2() {
return mFragment2;
}
/**
* {@link HomePagerAdapter} {@link Constructor}
* @param fm : {@link FragmentManager} instance
*/
public HomePagerAdapter(FragmentManager fm) {

/*
* Instantiate view pager fragments
*/
super(fm);
if(mFragment1 == null){
mFragment1 = new Fragment1();
}
if (mFragment2 == null) {
mFragment2 = new Fragment2();
}
}

/*
* Called to get the selected fragment
* @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
*/
@Override
public Fragment getItem(int iPosition) {

// Match the corresponding position
switch (iPosition) {
case 0:
return getmFragment1();
case 1:
return getFragment2();
default:
return null;
}
}

public Fragment1 getmFragment1() {
return mFragment1;
}

/*
* Called to get the number of fragment pages in the view pager
* @see android.support.v4.view.PagerAdapter#getCount()
*/
@Override
public int getCount() {
return NUMBER_OF_PAGES;
}
}

Now add two fragments inside the HomePagerAdapter Add Fragment1.java

public class Fragment1 extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout, null);
return view;
}
}

Add Fragment2.java

public class Fragment2 extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout, null);
return view;
}
}

Now add layout for Fragment1 and Fragment2's layout, here i am using the same layout for both fragments you can create distinct if you need fragment_layout.xml Now add layout constants in res/values folder Add strings constants in strings.xml, for below strings Search Recent Chat create colors.xml in values folder and add color codes for above used colors And That's all , you have done it, isnt it easy ?