Have you seen the Google Play application in your Android phone. Wondered about how they implemented swiping windows in it.
Don’t Worry, Here is an example which implements it.

Swipe Fragments in Android

Swipe Fragments in Android

Swipe Fragments in Android

Here we will create three pages which can be swiped to access it.

These are the three layouts for the three sections.

section1.xml


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Layout 1" />

    </LinearLayout>

section2.xml


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Layout 2" />

    </LinearLayout>

section3.xml


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Layout 3" />

    </LinearLayout>

Now the java for these layouts. These are also similar , only change is the layout.

Page1.java

package com.example.swipewindows;

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

public class Page1 extends Fragment {
	Context c;

        public Page1(){
		
	}
	public Page1(Context c) {
		this.c = c;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v = inflater.inflate(R.layout.section1, null);
		return       v;
	}
}

Page2.java

package com.example.swipewindows;

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

public class Page2 extends Fragment {
	Context c;

        public Page2(){
		
	}
	public Page2(Context c) {
		this.c = c;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v = inflater.inflate(R.layout.section2, null);

		return v;
	}
}

Page3.java

package com.example.swipewindows;

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

public class Page3 extends Fragment {
	Context c;

        public Page3(){
		
	}
	public Page3(Context c) {
		this.c = c;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v = inflater.inflate(R.layout.section3, null);

		return v;
	}
}

Now the MainActivity.java that uses these sections to join together.

package com.example.swipewindows;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

	/**
	 * The android.support.v4.view.PagerAdapter that will provide fragments for
	 * each of the sections. We use a
	 * android.support.v4.app.FragmentPagerAdapter derivative, which will keep
	 * every loaded fragment in memory. If this becomes too memory intensive, it
	 * may be best to switch to a
	 * android.support.v4.app.FragmentStatePagerAdapter.
	 */
	SectionsPagerAdapter mSectionsPagerAdapter;

	/**
	 * The ViewPager that will host the section contents.
	 */
	ViewPager mViewPager;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_act);
		// Create the adapter that will return a fragment for each of the three
		// primary sections
		// of the app.
		mSectionsPagerAdapter = new SectionsPagerAdapter(this,
				getSupportFragmentManager());

		// Set up the ViewPager with the sections adapter.
		mViewPager = (ViewPager) findViewById(R.id.pager);
		mViewPager.setAdapter(mSectionsPagerAdapter);

	}

	/**
	 * A FragmentPagerAdapter that returns a fragment corresponding to one of
	 * the primary sections of the app.
	 */
	public class SectionsPagerAdapter extends FragmentPagerAdapter {

		Context c;

		public SectionsPagerAdapter(Context c, FragmentManager fm) {
			super(fm);
			this.c = c;
		}

		@Override
		public Fragment getItem(int i) {
			Fragment fragment = null;
			if (i == 0) {
				fragment = new Page1(c);
			}
			if (i == 1) {
				fragment = new Page2(c);
			}
			if (i == 2) {
				fragment = new Page3(c);
			}
			return fragment; 
		}

		@Override
		public int getCount() {
			return 3;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			switch (position) {
			case 0:
				return getString(R.string.title_section1).toUpperCase();
			case 1:
				return getString(R.string.title_section2).toUpperCase();
			case 2:
				return getString(R.string.title_section3).toUpperCase();
			}
			return null;
		}
	}

}

Now the Strings.xml that contains the section titles.

<resources>

    <string name="app_name">SwipeWindows</string>
    <string name="title_section3">Section 3</string>
    <string name="title_section2">Section 2</string>
    <string name="title_section1">       Section 1      </string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">     Settings   </string>
    <string name="title_activity_main">SwipeActivity</string>

</resources>

Download the complete source from here.

 

8 Comments

  1. john November 30, 2012 at 6:22 pm

    you’re the man James! keep that knowledge coming

     
    • Prakash February 7, 2013 at 3:04 pm

      Hey friend, as u said everything is working like charm. But when the orientation changes.. the getting force close..

       
      • James February 7, 2013 at 3:10 pm

        oh that’s a bug in the Google Library. I will post another one with a fix on it.

         
        • vijay February 17, 2013 at 10:57 am

          please share the link here when you already post the fix version 🙂
          thx before 🙂

           
  2. mk August 1, 2013 at 5:20 pm

    Hi thanks for this good example. i have question , i want swipe paging like android default calculator. i search about that but i can’t understand what’s google use in it. i mean swipe page or scroll view or …. . can you tell me what’s that. thanks

     
  3. siddhu August 5, 2013 at 5:29 am

    i love you raja . . . . . . .excellent

     
  4. Ted October 28, 2013 at 2:09 am

    I do not know if it’s just me or if everyone else experiencing issues with your website.
    It appears as though some of the written text on your content are running off the screen.

    Can somebody else please provide feedback and let me know if this
    is happening to them as well? This might be
    a issue with my web browser because I’ve had this happen before.
    Many thanks

     
    • James October 29, 2013 at 3:44 am

      Can u please try with other browsers

       

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.