ViewPager is used to for implementing the Screen Slides. Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows as shown in the above video.
Steps for implementing ViewPager:
1) A Layout(that contains ViewPager) for the MainActivity.
2) FragmentPagerAdapter/FragmentStatePagerAdapter class which controls the fragments to be shown on page swipes.
3) Fragments to be shown on swiping the screen.
Lets begin by creating a new Android Application project and copy the contents for the activity_main.xml layout file:
step-1)
<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" />
In the above layout file we have created a view called ViewPager which will cover the entire screen for displaying the fragments. You can also put the above ViewPager view inside a RelativeLayout view for adding some other views for the same Activity.
step-2)
Now lets implement the adapter for the ViewPager inside MainActivity.java which will use the activity_main.xml layout as its setContentView.
MainActivity.java:
package com.tutorialsface.example.viewpager; 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.view.ViewPager; import android.support.v7.app.ActionBarActivity; public class MainActivity extends ActionBarActivity { ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.pager); /** set the adapter for ViewPager */ mViewPager.setAdapter(new SamplePagerAdapter( getSupportFragmentManager())); } /** Defining a FragmentPagerAdapter class for controlling the fragments to be shown when user swipes on the screen. */ public class SamplePagerAdapter extends FragmentPagerAdapter { public SamplePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { /** Show a Fragment based on the position of the current screen */ if (position == 0) { return new SampleFragment(); } else return new SampleFragmentTwo(); } @Override public int getCount() { // Show 2 total pages. return 2; } } }
The above code is self explanatory, so you can read the comments within the code to understand it.
We have used two fragments in the FragmentPagerAdapter for showing two different pages on swiping.
So lets implement two fragments now.
step-3)
SampleFragment.java
package com.tutorialsface.example.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class SampleFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_one, container, false); return rootView; } }
Layout file for SampleFragment.java :
fragment_one.xml
<RelativeLayout 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="#ff8" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="PAGE1" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="16dp" android:text="Tutorial on ViewPager" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="28dp" android:text="Tutorials FACE\nwww.tutorialsface.com " /> </RelativeLayout>
Implementation of second fragment:
SampleFragmentTwo.java
package com.tutorialsface.example.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class SampleFragmentTwo extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_two, container, false); return rootView; } }
Layout file for SampleFragmentTwo.java :
fragment_two.xml
<RelativeLayout 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="#8ff" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="PAGE2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="16dp" android:text="Tutorial on ViewPager" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="28dp" android:text="Tutorials FACE\nwww.tutorialsface.com " /> </RelativeLayout>
Now run the android application you just created.
The screenshots for the app:
52,099 total views, 3 views today
Pingback: Android simple Tabs with Swipe Layout(ViewPager) Fragments Tutorial | Tutorials Face()