Skip to main content

Android swipe views example

It is very easy to create an android swipe views using the ViewPager and FragmentPagerAdapter class. In this example i create three fragments and i make the fragments visible in an android swipe view in the MainActivity xml layout file. Here are the steps i follow for creating this example.

Step 1: Add the ViewPager element to the activity_main.xml file.
Step 2: Extends the MainActivity.java class with FragmentActivity.

Step 3 : Create an adapter class that extends the FragmentPagerAdapter class

Step 4: Create three Fragments and its layouts.

Step 5: Create an object of the adapter class and set it as the adapter for the ViewPager.
            

MainActivity.java
package com.swapdemo;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {
ViewPager viewpager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.pager);
PagerAdapter padapter = new PagerAdapter(getSupportFragmentManager());
     viewpager.setAdapter(padapter);
}
}

PageAdapater.java

package com.swapdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class PagerAdapter extends FragmentPagerAdapter {

public PagerAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}

@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
switch (arg0) {
case 0:

return new FragmentOne();
case 1:
return new FragmentTwo();
case 2:
return new FragmentThree();

default:
break;
}
return null;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return 3;
}


}

FragmentOne.java

package com.swapdemo;

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

public class FragmentOne extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_one_layout,container,false);
}


}

FragmentTwo.java

package com.swapdemo;

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

public class FragmentTwo extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_two_layout,container,false);
}

}

FragmentThree.java



package com.swapdemo;

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

public class FragmentThree extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_three_layout,container,false);
}
}


activity_main.xml

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

fragment_one_layout.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"
    android:background="#F20C36" >
    </RelativeLayout>

fragment_two_layout.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"
    android:background="#0C1BF2">
    </RelativeLayout>

fragment_three_layout.xml


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

</LinearLayout>

Comments

  1. Thank you so much for the detailed explanation!
    its very helpful to me.
    may i ask a question.
    how do i make a central fragment page,
    let say fragment two is the central page,
    then slide right to go to fragment 3.
    and slide left to go to fragment 1,
    is is possible with this code?

    ReplyDelete
  2. It says Cannot instantiate the type PagerAdapter
    hope u can help me
    Thank you

    ReplyDelete

Post a Comment

Popular posts from this blog

Android MySQL Database Operations

In this post we are going to learn about how to connect to MySQL Database from your Android Application and perform database operations. Here we create an android app that contain some login Activity through which the user can retrieve information from database and a registration Activity through which the user can add information into the database.  First you need to have the following components installed in your development machine.  1. Database : Here we use the MySQL database. 2. Web Server : Here we use the Apache Web Server. 3. Server side Scripting Language :   Here we use PHP for server side scripting. 4. Android Development environment : You must install android sdk and android studio.   I recommend you to download and install WAMPSERVER. The wamp server installer contains the following components. Apache Server Application MySQL Database PHP/phpMyAdmin First we have to create the database and table in MySQL. You can use the phpMyAdmin for mange yo

Android Swipe Views with Tabs

In this post we are going to learn about how to integrate the android tab view with the fragments using ViewPager and ActionBar class. For displaying the tabs on the top of the screen you need to interact with the android action bar, this is because the tab views is connected with the action bar. Ads by Google In this example application we make three tabs called "java", "php" and ".Net" and there are three seperate fragement view for each of these tabs. First you need to add the ViewPager into the activity_main.xml file. <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> Now create three layout files for the fragments. 1. java_layout.xml <?xml version="1.0" encod

"please correct the errors on this form" adsense error simple solution

Many of the bloggers now facing the problem with their adsense widgets. Whenever try to add the new  adsense link unit using the blogger widgets, it shows the error " please correct the errors on this form " as shown bellow. In blogger you can add the adsense units in two ways. First one is adding the adsense using the blogger widgets(Most of the beginners doing this) and the second method is to obtain the adsense code from the adsense login page and place it into the targeted position on the blog. To improve the revenue from adsense you have to place the appropriate ad unit into the right position. The adsense link units are very important for increasing the adsense revenue. So due to this error many of the bloggers are unable to place the link units.  Here is the solution for the problem. 1. Login into your adsense and blogger account. 2. Now make sure that only two adsense widgets (units) are present on your blog, this is because Google allows onl