About ViewPager in Andorid

ViewPager :

Now days, one of the most popular widgets in android library is the ViewPager. It’s already implemented in several of the Android apps, like Google Play Store app and my own apps also.

The ViewPager is the widget that allows users to swipe left or right to see an entirely new screen. Its very nice way to show the user mutliple tabs. It also has the ability to dynamically add and remove pages at anytime

ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter and FragmentStatePagerAdapter each of these classes have simple code showing how to build a full user interface with them.

it’s important to make sure the Support Library is updated from your SDK, and that the library itself is included in your project. Although the ViewPager and Fragments are newer constructs in Android, it’s easy to port them back to older versions of Android by using the Support Library. To add the library to your project, you’ll need to create a “libs” folder in your project and drop the JAR file in. For more information on this step, check out this page on the Support Library help pageon the developer site.

Decalring the ViewPager in XML Layout:

To set up your layout with ViewPager, add a<ViewPager>element to your XML layout. For example, if each page in the swipe view should consume the entire layout, then your layout looks like this: The Name of the layout is activity_main.xml

<android.support.v4.view.ViewPager

xmlns:android=”http://schemas.android.com/apk/res/android"

android:id=”@+id/pager”

android:layout_width=”match_parent”

android:layout_height=”match_parent” />

To insert child views that represent each page, you need to hook this layout to a PagerAdapter. There are two kinds of adapter you can use:

FragmentPagerAdapter

This is best when navigating between sibling screens representing a fixed, small number of pages.

FragmentStatePagerAdapter

This is best for paging across a collection of objects for which the number of pages is undetermined. It destroys fragments as the user navigates to other pages, minimizing memory usage.

Implementing in Activity:

The subclass should inherits the FragmentActivity or AppCompactActivity not Activity.

Need a Adapter Class and Fragment Class to setup the Viewpager in activity.

SamplePagerAdapter adapter=new SamplePagerAdapter(getSupportFragmentManager());

ViewPager mViewPager =(ViewPager)findViewById(R.id.pager);

mViewPager.setAdapter(adapter)

Here SamplePagerAdapter is my custom Adapter class extends with FragmentStatePagerAdapter.

Where Will Use the Viewpagers Mainly

1) Swipe view with tabs

2) Show Image sliding.

Here am explaining about Swipe View with Tabs.

Step 1:

Creating the Activity with the name of SwipingViewTabsActivity.java

public class SwipingViewTabsActivity extends AppCompatActivity {

private TabPagerAdapter tabPagerAdapter;

private ViewPager mViewPager;

private TabLayout mTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mViewPager= (ViewPager) findViewById(R.id.pager);

mTabLayout= (TabLayout) findViewById(R.id.tab_layout);

ArrayList<String> al_tabdata= new ArrayList<String>();

for(int i=0;i<10;i++) {

al_tabdata.add(“tab”+i);

}

tabPagerAdapter=new TabPagerAdapter(getSupportFragmentManager(),al_tabdata);

mViewPager.setAdapter(tabPagerAdapter);

mTabLayout.setTabsFromPagerAdapter(tabPagerAdapter);

mTabLayout.setupWithViewPager(mViewPager);

// Iterate over all tabs and set the custom view

for (int i = 0; i < mTabLayout.getTabCount(); i++) {

TabLayout.Tab tab = mTabLayout.getTabAt(i);

tab.setCustomView(tabPagerAdapter.getTabView(i));

} } }

Step 2:

Now creating the TabPagerAdapter Class extends with FragmentStatePagerAdapter

class TabPagerAdapter extends FragmentStatePagerAdapter {

ArrayList<String> lisdata=new ArrayList<String>();

public TabPagerAdapter(FragmentManager fm,ArrayList<String> tabdata){

super(fm);

listdata=tabdata;

}

@Override

public Fragment getItem(int position) {

String tabname=listdata.get(position);

Fragment fragment = new SampleFragment();

Bundle args = new Bundle();

args.putString(“tabname”, tabname);

fragment.setArguments(args);

return fragment;

}

@Override

public int getCount() {

return listdata.size();

}

@Override

public CharSequence getPageTitle(int position) {

String tabname=listdata.get(position);

return tabname ;

}

/*

* if you are planning to the give the custom layout to the your tabs then you should implement below method

public View getTabView(int position) {

// Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView

LayoutInflater inflater=SpotshopProductCatgorieActivity.this.getLayoutInflater();

View v = inflater.inflate(R.layout.custom_tab, null);

return v;

} */

}

Step 3:

Now Create the Fragment class

public static class SampleFragment extends Fragment {

String ARG_OBJECT = “tabname”;

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

// The last two arguments ensure LayoutParams are inflated

// properly.

View rootView = inflater.inflate(

R.layout.fragment_collection_object, container, false);

Bundle args = getArguments();

((TextView) rootView.findViewById(android.R.id.text1)).setText(args.getString(ARG_OBJECT));

return rootView;

}

}

Step 4:

The main xml layout file activity_main.xml

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"

android:layout_width=”match_parent”

android:layout_height=”match_parent” >

<android.support.design.widget.TabLayout

android:id=”@+id/tab_layout”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:background=”@color/colorPrimary”

app:tabGravity=”fill”

app:tabIndicatorColor=”#FBBB08"

app:tabIndicatorHeight=”4dp”

app:tabMode=”scrollable”

android:elevation=”0dp”

app:tabSelectedTextColor=”#FFFFFF”

app:tabTextColor=”#fff”/>

<android.support.v4.view.ViewPager

android:id=”@+id/pager”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

/>

</RelativeLayout>

Now Run the App check the results. cheery up guys..

In next post I will explain about image sliding with ViewPager.