<h3><span style="color: #000080;"><strong>ViewPager</strong></span></h3>
<p>Android <strong><span style="color: #008000;">ViewPager</span></strong> widget is found in the <span style="color: #008000;"><strong>support</strong></span> library and it allows the user to swipe left or right to see an entirely new screen.</p>
<p>Today we’re implementing a <strong><span style="color: #008000;">ViewPager</span></strong> by using <span style="color: #008000;"><strong>Fragment</strong> </span>and <span style="color: #008000;"><strong>FragmentPagerAdapter</strong></span>.</p>
<p>Get <span style="color: #0000ff;"><strong>GITHUB</strong></span> code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/ViewPagerApp"><strong>Here</strong></a>.</span></p>
<p><img class="aligncenter wp-image-297 " src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-20-22-40-301.png" alt="" width="430" height="717" /></p>
<h3><strong><span style="color: #000080;">Creating New Project</span></strong></h3>
<p>1.In Android Studio, go to <span style="color: #008000;"><strong>File </strong><strong>⇒</strong><strong> New Project</strong></span> and fill all the details required to create a new project. When it prompts to select a default activity, select <span style="color: #008000;"><strong>Blank Activity</strong></span> and proceed.</p>
<p>2.Open <strong><span style="color: #008000;">activity_main.xml</span> </strong>and write the below code.</p>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<pre><;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/black"
 android:orientation="vertical" >;

 <strong><span style="color: #008000;"><;!-- ViewPager -->;</span></strong>
 <;android.support.v4.view.ViewPager
 android:layout_width="match_parent" 
 android:layout_height="match_parent"
 android:id="@+id/viewPager" />;


 <strong><span style="color: #008000;"><;!-- Footer -->;</span></strong>
 <;include layout="@layout/footer" />;
 
<;/FrameLayout>;
</pre>
<p>3.Open <strong><span style="color: #008000;">drawable</span></strong> folder and create <strong><span style="color: #008000;">round_icon.xml</span></strong> and write below code.</p>
<p><strong><span style="color: #0000ff;">round_icon.xml </span></strong></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;inset xmlns:android="http://schemas.android.com/apk/res/android">;
 <;shape android:shape="rectangle">;
 <;gradient
 android:endColor="@color/white"
 android:startColor="@color/white"

 />;

 <;corners
 android:bottomLeftRadius="10dp"
 android:bottomRightRadius="10dp"
 android:topLeftRadius="10dp"
 android:topRightRadius="10dp" />;
 <;stroke
 android:width="1dp"
 android:color="@android:color/holo_green_dark" />;
 <;/shape>;
<;/inset>;</pre>
<p>4.Open<strong><span style="color: #0000ff;"> footer.xml</span></strong> defined in <span style="color: #0000ff;"><strong>activity_main.xml</strong> </span>and write the below code.</p>
<p><span style="color: #0000ff;"><strong>footer.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;

<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:padding="15dp"
 >;

 <;Button
 android:id="@+id/btn_1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:background="@drawable/round_icon" />;

 <;Button
 android:id="@+id/btn_2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:layout_marginLeft="5dip"
 android:layout_toRightOf="@id/btn_1"
 android:background="@drawable/round_icon" />;

 <;Button
 android:id="@+id/btn_3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:layout_marginLeft="5dip"
 android:layout_toRightOf="@id/btn_2"
 android:background="@drawable/round_icon" />;


<;/RelativeLayout>;


</pre>
<p>5.Create <strong><span style="color: #0000ff;">fragment_one</span></strong>,<strong><span style="color: #0000ff;">fragment_two</span></strong>,<span style="color: #0000ff;"><strong>fragment_three</strong></span> and write the below code.</p>
<p><strong><span style="color: #0000ff;">fragment_one.xml</span></strong></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FragmentOne"
 android:textSize="25dp"
 android:layout_centerInParent="true"/>;
<;/RelativeLayout>;</pre>
<p><strong><span style="color: #0000ff;">fragment_two.xml</span></strong></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FragmentTwo"
 android:textSize="25dp"
 android:layout_centerInParent="true"/>;

<;/RelativeLayout>;

</pre>
<p><strong><span style="color: #0000ff;">fragment_three.xml</span></strong></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="FragmentThree"
 android:textSize="25dp"
 android:layout_centerInParent="true"/>;

<;/RelativeLayout>;
</pre>
<p>6.Under <strong><span style="color: #008000;">package</span></strong> name create a folder name fragment and make three fragments named <strong><span style="color: #008000;">FragmentOne</span></strong>, <strong><span style="color: #008000;">FragmentTwo</span></strong>, <span style="color: #008000;"><strong>FragmentThree</strong></span>.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><span style="color: #0000ff;"><strong>FragmentOne.Java</strong></span></p>
<pre>package com.example.lenovo.viewpagerapp.fragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.support.v4.app.Fragment;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;

public class FragmentOne extends Fragment{

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 View view = inflater.inflate(R.layout.fragment_one,container,false);

 return view;
 }
}</pre>
<p><strong><span style="color: #0000ff;">FragmentTwo.Java</span></strong></p>
<pre>package com.example.lenovo.viewpagerapp.fragment;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;


public class FragmentTwo extends Fragment{

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 View view = inflater.inflate(R.layout.fragment_two,container,false);

 return view;
 }
}</pre>
<p><strong><span style="color: #0000ff;">FragmentThree.Java</span></strong></p>
<pre>package com.example.lenovo.viewpagerapp.fragment;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;


public class FragmentThree extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 View view = inflater.inflate(R.layout.fragment_three, container, false);

 return view;
 }
}</pre>
<p>7.Under <span style="color: #008000;"><strong>package</strong></span> name create a class named <span style="color: #008000;"><strong>ViewPagerAdapter</strong></span> and write the below code.It sets the adapter to the viwpager.</p>
<p><strong><span style="color: #0000ff;">ViewPagerAdapter.Java</span></strong></p>
<pre>package com.example.lenovo.viewpagerapp;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.example.lenovo.viewpagerapp.fragment.FragmentOne;
import com.example.lenovo.viewpagerapp.fragment.FragmentThree;
import com.example.lenovo.viewpagerapp.fragment.FragmentTwo;

public class ViewPagerAdapter extends FragmentPagerAdapter {


 public ViewPagerAdapter(FragmentManager fm) {
 super(fm);

 }

 @Override
 public Fragment getItem(int position) {


 switch (position) {
 case 0:

 return new FragmentOne();
 case 1:

 return new FragmentTwo();
 case 2:

 return new FragmentThree();

 }

 return null;
 }

 @Override
 public int getCount() {
 return 3;
 }
}
</pre>
<p>8.Open <span style="color: #008000;"><strong>MainActivity.Java</strong></span> and write the below code.</p>
<p><strong><span style="color: #0000ff;">MainActivity.Java</span></strong></p>
<pre>package com.example.lenovo.viewpagerapp;

import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends FragmentActivity {

 private ViewPager _mViewPager;
 private ViewPagerAdapter _adapter;
 private Button _btn1, _btn2, _btn3;


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

 <strong><span style="color: #008000;"> // sliding screen create FragmentOne,FragmentTwo,FragmentThree</span></strong>
 setUpView();

 <strong><span style="color: #008000;"> //setting buttons size and text with corresponding fragment</span></strong>
 setButtonWithFragment();


 }


 private void setUpView() {
 _mViewPager = (ViewPager) findViewById(R.id.viewPager);
 _adapter = new ViewPagerAdapter(getSupportFragmentManager());
 _mViewPager.setAdapter(_adapter);
 _mViewPager.setCurrentItem(0);
 initButton();
 }

 private void setButtonWithFragment() {
 _mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

 @Override
 public void onPageScrollStateChanged(int position) {
 }

 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {
 }

 @Override
 public void onPageSelected(int position) {

 btnAction(position);
 }

 });

 }

 <strong><span style="color: #008000;">//According to the particular fragment position it sets all the three button
 // with the corresponding height,width and text</span></strong>
 private void btnAction(int action) {
 switch (action) {
 case 0:
 setButton(_btn1, "1", 40, 40);
 setButton(_btn2, "", 20, 20);
 setButton(_btn3, "", 20, 20);
 break;

 case 1:
 setButton(_btn2, "2", 40, 40);
 setButton(_btn1, "", 20, 20);
 setButton(_btn3, "", 20, 20);
 break;

 case 2:
 setButton(_btn3, "3", 40, 40);
 setButton(_btn1, "", 20, 20);
 setButton(_btn2, "", 20, 20);
 break;
 }
 }

 <strong><span style="color: #008000;">// Inisialize buttons and Bydefault setting buttons height,width and text</span></strong>
 private void initButton() {
 _btn1 = (Button) findViewById(R.id.btn_1);
 _btn2 = (Button) findViewById(R.id.btn_2);
 _btn3 = (Button) findViewById(R.id.btn_3);
 setButton(_btn1, "1", 40, 40);
 setButton(_btn2, "", 20, 20);
 setButton(_btn3, "", 20, 20);
 }

 <strong><span style="color: #008000;">//setting button with the corresponding height,width and text</span></strong>
 private void setButton(Button btn, String text, int h, int w) {
 btn.setWidth(w);
 btn.setHeight(h);
 btn.setText(text);
 }
}
</pre>
<p><span style="color: #008000;"><strong>When you run the app it will look like this:</strong></span></p>
<p><img class="alignnone wp-image-297" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-20-22-40-301-180x300.png" alt="" width="218" height="364" /> <img class="alignnone wp-image-298" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-20-22-40-401-1-180x300.png" alt="" width="219" height="365" /> <img class="alignnone wp-image-295" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-20-22-40-521-180x300.png" alt="" width="218" height="363" />