Skip to main content

How to create View Pager of Fragment in android



Viewpager are used when we required sliding window page with different content on each page and Viewpager is the recommended and easy to use method in the scenario where you want to show multiple types of the fragment on the same screen and user can change the contain of the page by just swiping on the page or by toching on the tab bar.

Here in this example, I am using Android Studio 2.2 it is latest version at the time I am writing this blog.

So we are good to start our view pager demo. Steps to create the project are as given below.

  • Click on File

  • Move your mouse to new

  • Click  on New Project

  • select min version and a relevant name of your project.


In this demo I taken the name of the project is ViewPagerExample, you can choose your suitable name as required.
If you want you can test your app here just to ensure that everything is fine and your project are configured correctly.

ViewPager layout 


We need to add the view pager layout to our main activity layout, open the activity_main.xml file and modify it as given below.
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.debugandroid.viewpagerexample.MainActivity">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

Fragment


You can see that we have added out ViewPager in our main layout files. After that, we are here creating three fragments which we will show on each page. Here we are creating a very simple fragment for better understanding and will copy paste the same fragment with three different names and modify the layout files.

Fragment1.java
 package com.debugandroid.viewpagerexample;  
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}

You can see that we have done nothing in this Fragment we just added it and set a layout file fragement1.xml and our onCreateView method returning that layout file. Similarly, we have to create the Fragment2, paste java and Fragment3.java file by just copy paste the file. After creating the both file you have to change the R.layout.fragment2 adn fragement3 corresponding to the Fragment name of contain you want to show.
You may getting the error in red color because yet we have not created our fragment layout file. So create the our Fragment1.xml,Fragment2.xml and Fragment3.xml files. Here below giving you example of Fragment1.xml similarly you can create the Fragment2xml and Fragement3.xml.

Create Layout Files for Fragment


So for creating the layout file right click on layout under res folder and select the new and then layout resource file and give the name as fragement1 and click on finish.
After that you have do some modification in this layout file for adding a simple text view inside our fragment. For that modify your fragment1.xml file as given below.
 <?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"
android:background="@color/lime">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18dp"
android:textColor="@android:color/white"
android:text="Fragment 1"/>
</LinearLayout>

Similarly you have to create two more fragment layout file or you can just copy paste the same file with the name of fragment2.xml and fragement3.xml and change the contain inside text view. You may need to add the color code as well in your color.xml file for setting the background color of our linear layout.

Create ViewPager Adapter


Next we have to create a view pager adapter witch will inflate and show our different-different fragment as you change the page. For example in this demo Fragment1 will be show on position zero, Fragment2 on position 1 and so on.
PageAdapter.java
 package com.debugandroid.viewpagerexample;  
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class PageAdapter extends FragmentPagerAdapter {
private FragmentManager fm;
public PageAdapter(FragmentManager fm){
super(fm);
this.fm=fm;
}
@Override
public Fragment getItem(int position) {
Fragment fragment=null;
if(position==0){
fragment=new Fragment1();
}
if(position==1){
fragment=new Fragment2();
}
if(position==2){
fragment=new Fragment3();
}
return fragment;
}
@Override
public int getCount() {
return 3;
}
@Override
public int getItemPosition(Object object)
{
return POSITION_UNCHANGED;
}
}

Here two method are important which we are overriding here inside our view pager adapter one is the getItem() and other one is the getCount(). getItem() method will return our fragment on the basis of page position and getCount() give number of item count in our view pager.

Set ViewPager Adapter


Next we have to combined the all stuff together and test our application. So open the MainActivity.java file and modify it as given below.
 package com.debugandroid.viewpagerexample;  
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private PageAdapter pageAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager= (ViewPager) findViewById(R.id.viewPager);
pageAdapter=new PageAdapter(getSupportFragmentManager());
viewPager.setAdapter(pageAdapter);
}
}

You can see that in above code we are declaring two variable viewPager and pageAdapter and simply initializing it.
viewPage=(ViewPager)findViewById(R.id.viewPager);
using above code we initializing our view pager on the basis of viewpager ID that we have set during our view pager declaration in our main layout file. In next line we are initializing our view pager adapter and passing the FragmentManger as argument and lastly we are setting the adapter using setAdapter method.
We are set to test our application now, you click on run and select the emulator or any other connected device. you will get the output as given below.
View Pager Screenshots



You can download the source code from here.

Comments

  1. […] note I was showing you this example inside the app which we have created in our last post, you can refer it if you have not gone through the last […]

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Create Custom EditText View in Android

We use the EditText for taking the input from the user and use it at several places in our project. We required to do lots of customization for each time and there are lots of redundant code we write. Writing and managing these redundant codes is very difficult for example if we want to change the look and feel of the view them we need to modify it at each place where our EditText is getting used. So to avoid these kinds of the problem we can create our own Custom EditText View by just. The EditText view is just an extension of the TextView with lots of editing option and properties that required for the user input. How To Create Custom EditText View For creating the Custom EditText we need to extend the AppCompatEditText and override all three constructors of the view as given below. import android.content.Context; import android.graphics.Typeface; import android.support.annotation.Nullable; import android.support.v7.widget.AppCompatEditText; import android.util.AttributeSet; public