Let\u2019s take a closer look:<\/p>\n
1. Create a New Android Studio Project<\/h2>\nTip<\/strong>
\nYou may skip project creation and jump directly to the beginning of the example<\/strong><\/a> below.<\/div>\nOpen Android Studio and choose \u201cStart a new Android Studio Project\u201d in the welcome screen.<\/p>\n
![\"\u201cWelcome](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/10\/androidstudioexs1.png\")
<\/a>\u201cWelcome to Android Studio\u201d screen. Choose \u201cStart a new Android Studio Project\u201d.<\/figcaption><\/figure><\/p>\nSpecify the name of the application, the project and the package.<\/p>\n
![\"\u201cConfigure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/androidviewpagerexample.png\")
<\/a>\u201cConfigure your new project\u201d screen. Add your application name and the projects package name.<\/figcaption><\/figure><\/p>\nIn the next window, select the form factors your app will run on.<\/p>\n
![\"\u201cTarget](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/10\/androidstudioexs3.png\")
<\/a>\u201cTarget Android Devices\u201d screen.<\/figcaption><\/figure><\/p>\nIn the next window you should choose \u201cAdd no activity\u201d. In this example, we are going to create our Activity.<\/p>\n
![\"\u201cAdd](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/10\/androidstudioex4.png\")
<\/a>\u201cAdd an activity to Mobile\u201d. Choose: \u201cAdd no activity\u201d.<\/figcaption><\/figure><\/p>\nNow, our project has just been created!<\/p>\n
<\/span><\/p>\n2. Create the layout of the main AndroidViewPagerExample<\/h2>\n
The AndroidViewPagerExample is the main Activity of our example, and this is the Activity in which we are going to create a ViewPager instance and set its FragmentPagerAdapter. Now, we are going to make the layout of this Activity, which will be a simple layout xml for the AndroidViewPagerExample.class, that consists of a LinearLayout with vertical orientation, that includes a ViewPager.<\/p>\n
Add a new xml file inside \/res\/layout<\/code> folder, with name activity_main.xml. We should have the \/res\/layout\/activity_main.xml<\/code> file and paste the code below. <\/div> <\/div><\/p>\nactivity_main.xml<\/span><\/em><\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:custom=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:layout_gravity=\"center\"\n android:background=\"@drawable\/background_blue\"\n android:orientation=\"vertical\">\n\n <android.support.v4.view.ViewPager\n android:id=\"@+id\/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:layout_gravity=\"center\"\n tools:context=\".MainActivity\"\/>\n\n<\/LinearLayout>\n<\/pre>\n3. Create the source code of the main AndroidViewPagerExample Activity<\/h2>\n
Add a new Java class inside src\/com.javacodegeeks.androidViewPagerExample\/<\/code> so that we are going to have the src\/com.javacodegeeks.androidViewPagerExample\/AndroidViewPagerExample.java<\/code> file and paste the code below.<\/p>\nAndroidViewPagerExample.java<\/span><\/em><\/p>\npackage com.javacodegeeks.examples.androidViewPagerExample;\n\nimport android.support.v4.app.FragmentManager;\nimport android.support.v4.app.FragmentPagerAdapter;\nimport android.os.Bundle;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.app.AppCompatActivity;\n\npublic class AndroidViewPagerExample extends AppCompatActivity {\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n ViewPager pager = (ViewPager) findViewById(R.id.pager);\n pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));\n }\n\n private class MyPagerAdapter extends FragmentPagerAdapter {\n\n public MyPagerAdapter(FragmentManager fm) {\n super(fm);\n }\n\n @Override\n public android.support.v4.app.Fragment getItem(int pos) {\n switch (pos) {\n case 0:\n return FragmentViewPager.newInstance(getString(R.string.title_section1), R.drawable.rock);\n case 1:\n return FragmentViewPager.newInstance(getString(R.string.title_section2), R.drawable.paper);\n case 2:\n return FragmentViewPager.newInstance(getString(R.string.title_section3), R.drawable.scissors);\n default:\n return FragmentViewPager.newInstance(getString(R.string.title_section1), R.drawable.rock);\n }\n }\n\n @Override\n public int getCount() {\n return 3;\n }\n }\n}\n<\/pre>\n4. Create the layout of the main FragmentViewPager<\/h2>\n
The FragmentViewPager is the Fragment of our example, from which we are going to recreate instances and add them in the ViewPager. Now, we are going to make the layout of this Fragment, which will be a simple layout xml for the FragmentViewPager.class, that consists of a LinearLayout with vertical orientation, that includes a TextView and an ImageView.<\/p>\n
Add a new xml file inside \/res\/layout<\/code> folder, with name fragment_main.xml. We should have the \/res\/layout\/fragment_main.xml<\/code> file and paste the code below.<\/p>\nfragment_main.xml<\/span><\/em><\/p>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:background=\"#00000000\"\n android:orientation=\"vertical\"\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\n android:paddingTop=\"@dimen\/activity_vertical_margin\">\n\n <TextView\n android:id=\"@+id\/title\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_gravity=\"center\"\n android:layout_marginTop=\"44dp\"\n android:textColor=\"#ffffff\"\n android:textSize=\"60dp\" \/>\n\n <ImageView\n android:id=\"@+id\/image\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_gravity=\"center\"\n android:layout_marginTop=\"44dp\" \/>\n\n<\/LinearLayout>\n<\/pre>\n5. Create the source code of the main FragmentViewPager support.v4.app.Fragment<\/h2>\n
Add a new Java class inside src\/com.javacodegeeks.androidViewPagerExample\/<\/code> so that we are going to have the src\/com.javacodegeeks.androidViewPagerExample\/FragmentViewPager.java<\/code> file and paste the code below.[ulp id=’Ja8Orb5oPKdShcXt’]<\/p>\nFragmentViewPager.java<\/span><\/em><\/p>\npackage com.javacodegeeks.examples.androidViewPagerExample;\n\nimport android.os.Bundle;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.ImageView;\nimport android.widget.TextView;\n\npublic class FragmentViewPager extends android.support.v4.app.Fragment {\n\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {\n View v = inflater.inflate(R.layout.fragment_main, container, false);\n\n TextView tv = (TextView) v.findViewById(R.id.title);\n tv.setText(getArguments().getString(\"text\"));\n\n ImageView imageView = (ImageView) v.findViewById(R.id.image);\n imageView.setBackgroundResource(getArguments().getInt(\"img\"));\n\n return v;\n }\n\n public static FragmentViewPager newInstance(String text, int image) {\n\n FragmentViewPager f = new FragmentViewPager();\n Bundle b = new Bundle();\n b.putString(\"text\", text);\n b.putInt(\"img\", image);\n\n f.setArguments(b);\n\n return f;\n }\n}\n\n<\/pre>\n6. Android Manifest<\/h2>\n
The AndroidManifest.xml of our project is simple and contains the main Activity of our example:<\/p>\n
AndroidManifest.xml<\/span><\/em><\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n package=\"com.javacodegeeks.examples.androidViewPagerExample\" >\n\n <application\n android:allowBackup=\"true\"\n android:icon=\"@mipmap\/ic_launcher\"\n android:label=\"@string\/app_name\"\n android:theme=\"@style\/AppTheme\" >\n <activity\n android:name=\".AndroidViewPagerExample\"\n android:label=\"@string\/app_name\" >\n <intent-filter>\n <action android:name=\"android.intent.action.MAIN\" \/>\n\n <category android:name=\"android.intent.category.LAUNCHER\" \/>\n <\/intent-filter>\n <\/activity>\n <\/application>\n\n<\/manifest\n>\n<\/pre>\n7. Composing build.gradle file<\/h2>\n
We should add the AppCompat V7 support support library in our project. We can this as a dependency to our application via build.gradle file.<\/p>\n
build.gradle<\/span><\/em><\/p>\napply plugin: 'com.android.application'\n\nandroid {\n compileSdkVersion 23\n buildToolsVersion \"23.0.2\"\n\n defaultConfig {\n applicationId \"com.javacodegeeks.examples.androidViewPagerExample\"\n minSdkVersion 14\n targetSdkVersion 23\n versionCode 1\n versionName \"1.0\"\n }\n buildTypes {\n release {\n minifyEnabled false\n proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\n }\n }\n}\n\ndependencies {\n compile fileTree(dir: 'libs', include: ['*.jar'])\n compile 'com.android.support:appcompat-v7:23.1.1'\n}\n\n<\/pre>\n8. Build, compile and run<\/h2>\n
When we build, compile and run our project, the main AndroidViewPagerExample should look like this:<\/p>\n
![\"This](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/androidviewpager1.png\")
<\/a>This is the first Fragment of our ViewPager.<\/figcaption><\/figure>
\n![\"This](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/androidviewpager4.png\")
<\/a>This is the second Fragment of our ViewPager.<\/figcaption><\/figure>
\n![\"This](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/androidviewpager3.png\")
<\/a>This is the third Fragment of our ViewPager.<\/figcaption><\/figure>
\n![\"This](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/androidviewpager2.png\")
<\/a>This is the transition between two Fragments.<\/figcaption><\/figure><\/p>\n9. Download the Android Studio Project<\/h2>\n
This was an example of Android ViewPager Example.<\/p>\n
\nYou may skip project creation and jump directly to the beginning of the example<\/strong><\/a> below.<\/div>\n
Open Android Studio and choose \u201cStart a new Android Studio Project\u201d in the welcome screen.<\/p>\n
Specify the name of the application, the project and the package.<\/p>\n In the next window, select the form factors your app will run on.<\/p>\n In the next window you should choose \u201cAdd no activity\u201d. In this example, we are going to create our Activity.<\/p>\n Now, our project has just been created!<\/p>\n <\/span><\/p>\n The AndroidViewPagerExample is the main Activity of our example, and this is the Activity in which we are going to create a ViewPager instance and set its FragmentPagerAdapter. Now, we are going to make the layout of this Activity, which will be a simple layout xml for the AndroidViewPagerExample.class, that consists of a LinearLayout with vertical orientation, that includes a ViewPager.<\/p>\n Add a new xml file inside activity_main.xml<\/span><\/em><\/p>\n Add a new Java class inside AndroidViewPagerExample.java<\/span><\/em><\/p>\n The FragmentViewPager is the Fragment of our example, from which we are going to recreate instances and add them in the ViewPager. Now, we are going to make the layout of this Fragment, which will be a simple layout xml for the FragmentViewPager.class, that consists of a LinearLayout with vertical orientation, that includes a TextView and an ImageView.<\/p>\n Add a new xml file inside fragment_main.xml<\/span><\/em><\/p>\n Add a new Java class inside FragmentViewPager.java<\/span><\/em><\/p>\n The AndroidManifest.xml of our project is simple and contains the main Activity of our example:<\/p>\n AndroidManifest.xml<\/span><\/em><\/p>\n We should add the AppCompat V7 support support library in our project. We can this as a dependency to our application via build.gradle file.<\/p>\n build.gradle<\/span><\/em><\/p>\n When we build, compile and run our project, the main AndroidViewPagerExample should look like this:<\/p>\n This was an example of Android ViewPager Example.<\/p>\n<\/a><\/a><\/a><\/a>2. Create the layout of the main AndroidViewPagerExample<\/h2>\n
\/res\/layout<\/code> folder, with name activity_main.xml. We should have the \/res\/layout\/activity_main.xml<\/code> file and paste the code below.<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:custom=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:layout_gravity=\"center\"\n android:background=\"@drawable\/background_blue\"\n android:orientation=\"vertical\">\n\n <android.support.v4.view.ViewPager\n android:id=\"@+id\/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:layout_gravity=\"center\"\n tools:context=\".MainActivity\"\/>\n\n<\/LinearLayout>\n<\/pre>\n
3. Create the source code of the main AndroidViewPagerExample Activity<\/h2>\n
src\/com.javacodegeeks.androidViewPagerExample\/<\/code> so that we are going to have the src\/com.javacodegeeks.androidViewPagerExample\/AndroidViewPagerExample.java<\/code> file and paste the code below.<\/p>\npackage com.javacodegeeks.examples.androidViewPagerExample;\n\nimport android.support.v4.app.FragmentManager;\nimport android.support.v4.app.FragmentPagerAdapter;\nimport android.os.Bundle;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.app.AppCompatActivity;\n\npublic class AndroidViewPagerExample extends AppCompatActivity {\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n ViewPager pager = (ViewPager) findViewById(R.id.pager);\n pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));\n }\n\n private class MyPagerAdapter extends FragmentPagerAdapter {\n\n public MyPagerAdapter(FragmentManager fm) {\n super(fm);\n }\n\n @Override\n public android.support.v4.app.Fragment getItem(int pos) {\n switch (pos) {\n case 0:\n return FragmentViewPager.newInstance(getString(R.string.title_section1), R.drawable.rock);\n case 1:\n return FragmentViewPager.newInstance(getString(R.string.title_section2), R.drawable.paper);\n case 2:\n return FragmentViewPager.newInstance(getString(R.string.title_section3), R.drawable.scissors);\n default:\n return FragmentViewPager.newInstance(getString(R.string.title_section1), R.drawable.rock);\n }\n }\n\n @Override\n public int getCount() {\n return 3;\n }\n }\n}\n<\/pre>\n4. Create the layout of the main FragmentViewPager<\/h2>\n
\/res\/layout<\/code> folder, with name fragment_main.xml. We should have the \/res\/layout\/fragment_main.xml<\/code> file and paste the code below.<\/p>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:background=\"#00000000\"\n android:orientation=\"vertical\"\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\n android:paddingTop=\"@dimen\/activity_vertical_margin\">\n\n <TextView\n android:id=\"@+id\/title\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_gravity=\"center\"\n android:layout_marginTop=\"44dp\"\n android:textColor=\"#ffffff\"\n android:textSize=\"60dp\" \/>\n\n <ImageView\n android:id=\"@+id\/image\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_gravity=\"center\"\n android:layout_marginTop=\"44dp\" \/>\n\n<\/LinearLayout>\n<\/pre>\n
5. Create the source code of the main FragmentViewPager support.v4.app.Fragment<\/h2>\n
src\/com.javacodegeeks.androidViewPagerExample\/<\/code> so that we are going to have the src\/com.javacodegeeks.androidViewPagerExample\/FragmentViewPager.java<\/code> file and paste the code below.[ulp id=’Ja8Orb5oPKdShcXt’]<\/p>\npackage com.javacodegeeks.examples.androidViewPagerExample;\n\nimport android.os.Bundle;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.ImageView;\nimport android.widget.TextView;\n\npublic class FragmentViewPager extends android.support.v4.app.Fragment {\n\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {\n View v = inflater.inflate(R.layout.fragment_main, container, false);\n\n TextView tv = (TextView) v.findViewById(R.id.title);\n tv.setText(getArguments().getString(\"text\"));\n\n ImageView imageView = (ImageView) v.findViewById(R.id.image);\n imageView.setBackgroundResource(getArguments().getInt(\"img\"));\n\n return v;\n }\n\n public static FragmentViewPager newInstance(String text, int image) {\n\n FragmentViewPager f = new FragmentViewPager();\n Bundle b = new Bundle();\n b.putString(\"text\", text);\n b.putInt(\"img\", image);\n\n f.setArguments(b);\n\n return f;\n }\n}\n\n<\/pre>\n6. Android Manifest<\/h2>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n package=\"com.javacodegeeks.examples.androidViewPagerExample\" >\n\n <application\n android:allowBackup=\"true\"\n android:icon=\"@mipmap\/ic_launcher\"\n android:label=\"@string\/app_name\"\n android:theme=\"@style\/AppTheme\" >\n <activity\n android:name=\".AndroidViewPagerExample\"\n android:label=\"@string\/app_name\" >\n <intent-filter>\n <action android:name=\"android.intent.action.MAIN\" \/>\n\n <category android:name=\"android.intent.category.LAUNCHER\" \/>\n <\/intent-filter>\n <\/activity>\n <\/application>\n\n<\/manifest\n>\n<\/pre>\n
7. Composing build.gradle file<\/h2>\n
apply plugin: 'com.android.application'\n\nandroid {\n compileSdkVersion 23\n buildToolsVersion \"23.0.2\"\n\n defaultConfig {\n applicationId \"com.javacodegeeks.examples.androidViewPagerExample\"\n minSdkVersion 14\n targetSdkVersion 23\n versionCode 1\n versionName \"1.0\"\n }\n buildTypes {\n release {\n minifyEnabled false\n proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\n }\n }\n}\n\ndependencies {\n compile fileTree(dir: 'libs', include: ['*.jar'])\n compile 'com.android.support:appcompat-v7:23.1.1'\n}\n\n<\/pre>\n8. Build, compile and run<\/h2>\n
<\/a>
\n<\/a>
\n<\/a>
\n<\/a>9. Download the Android Studio Project<\/h2>\n