ViewPager
Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen.
Today we’re implementing a ViewPager by using Fragment and FragmentPagerAdapter.
Get GITHUB code from Here.
Creating New Project
1.In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.
2.Open activity_main.xml and write the below code.
activity_main.xml
<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" >
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewPager" />
<!-- Footer -->
<include layout="@layout/footer" />
</FrameLayout>
3.Open drawable folder and create round_icon.xml and write below code.
round_icon.xml
<?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>
4.Open footer.xml defined in activity_main.xml and write the below code.
footer.xml
<?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>
5.Create fragment_one,fragment_two,fragment_three and write the below code.
fragment_one.xml
<?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>
fragment_two.xml
<?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>
fragment_three.xml
<?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>
6.Under package name create a folder name fragment and make three fragments named FragmentOne, FragmentTwo, FragmentThree.
FragmentOne.Java
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;
}
}
FragmentTwo.Java
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;
}
}
FragmentThree.Java
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;
}
}
7.Under package name create a class named ViewPagerAdapter and write the below code.It sets the adapter to the viwpager.
ViewPagerAdapter.Java
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;
}
}
8.Open MainActivity.Java and write the below code.
MainActivity.Java
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);
// sliding screen create FragmentOne,FragmentTwo,FragmentThree
setUpView();
//setting buttons size and text with corresponding fragment
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);
}
});
}
//According to the particular fragment position it sets all the three button
// with the corresponding height,width and text
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;
}
}
// Inisialize buttons and Bydefault setting buttons height,width and text
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);
}
//setting button with the corresponding height,width and text
private void setButton(Button btn, String text, int h, int w) {
btn.setWidth(w);
btn.setHeight(h);
btn.setText(text);
}
}
When you run the app it will look like this:
