Android ViewPager Introduction:-

Android ViewPager  allows the user to flip left and right through pages of data. In our android application we’ll implement using Fragment and PagerAdapter. that swipes through two fragment views with different images and texts.


in the activity_main.xml in layout directory, add  the ViewPager Widget and code look like as  below:-

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</androidx.viewpager.widget.ViewPager>

</RelativeLayout>

 

now create a new layout name as fragment_animals.xml and  fill out below code:-

 

fragment_animals.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textview"
android:textSize="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>

<ImageView
android:id="@+id/imageview"
android:src="@drawable/animals"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>

</LinearLayout>
 
now create a new layout name as fragment_birds.xml and  fill out below code:-


fragment_birds.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:gravity="center">
</TextView>

<ImageView
android:id="@+id/imageview"
android:src="@drawable/birds"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>

</LinearLayout>

now create a new Java Class name as FragmentAnimals.java, extend with Fragment Class and  fill out below code:-.


FragmentAnimals.java

package com.androidcreation.viewpager;


import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.fragment.app.Fragment;

public class FragmentAnimals extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v= inflater.inflate(R.layout.fragment_animals, container, false);
TextView textView=v.findViewById(R.id.textview);
textView.setText("Animals Fragment");
return v;
}
}


 
now create another  new Java Class name as FragmentBirds.java, extend with Fragment Class and  fill out below code:-.

FragmentBirds.java

package com.androidcreation.viewpager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.fragment.app.Fragment;

public class FragmentBirds extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v= inflater.inflate(R.layout.fragment_birds, container, false);
TextView textView=v.findViewById(R.id.textview);
textView.setText("Birds Fragment");
return v;
}
}

now create a Adapter class which extends FragmentPageAdapter name as MyPagerAdapter.java, it is used to sliding fragments  and fill out below code:-

 

MyPagerAdapter.java

package com.androidcreation.viewpager;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

class MyPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mList = new ArrayList<>();
private final List<String> mTitleList = new ArrayList<>();
public MyPagerAdapter(FragmentManager supportFragmentManager) {
super(supportFragmentManager);
}
@Override
public Fragment getItem(int i) {
return mList.get(i);
}
@Override
public int getCount() {
return mList.size();
}
public void addFragment(Fragment fragment, String title) {
mList.add(fragment);
mTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mTitleList.get(position);
}
}

 

finally in MainActivity put the below code:-

 

MainActivity.java

package com.androidcreation.viewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewpager);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentAnimals(), "Animals");
adapter.addFragment(new FragmentBirds(), "Birds");
viewPager.setAdapter(adapter);
}
}
0 CommentsClose Comments

Leave a comment

shares

Newsletter Subscribe

Get the Latest Posts & Articles in Your Email

We Promise Not to Send Spam:)