Create application with Swipe gesture to navigate page like Google Play

Android users might already have been familiar with Google Play application, which first, I think,  inspires the pattern of horizontal swipe gesture to navigate among content pages.

This article is gonna show you how to do a very very quick simple application that does the same pattern.

Swipe Pattern Sample

There will be three pages, each page will display a sample image of that page as swiping along. My sample, I put: “Girl, Dog & Cat”.

A – Requirements

– ViewPagerIndicator library, you can get it from here: http://viewpagerindicator.com/

– Android Support Package Library v4, well, you can either download the above package and use the already-had libs or get it from SDK Update. Either way is fine.

B – Project

Well, since I’m an Ant user, I prefer to do stuffs in command-line, so this tutorial will probably in command-mode.

1. Create the project

$ create project --target 2 --name Droid05 --path ./Droid05 --activity MainScreen --package pete.apps.study.droid05

Now project is ready for the next step.

2. Configure libs

– After downloading the ViewPagerIndicator package, you need to update the library in order to get Ant build.xml for the job. Please refer to my previous post: https://xjaphx.wordpress.com/2012/12/26/build-viewpagerindicator-with-ant/
– Now go to config the library reference, edit the project.properties and add this line

android.library.reference.1=../../tools/frameworks/ViewPagerIndicator/library

that is my case, you should locate to your correct directory where you put the /library of the ViewPagerIndicator.
– To test the config, you can just type to confirm

$ ant clean debug

If it succeeds, it means fine.
3. Implement the code
– Create the layout, pretty much simple, there will use a TitlePageIndicator and a ViewPager, main.xml

$ vi res/
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFFFF"
    >
    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titles"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFFFF"
        android:textColor="#FF000099"
        app:footerColor="#FF00FF00"
        app:footerLineHeight="3dp"
        app:footerIndicatorHeight="6dp"
        app:footerIndicatorStyle="triangle"
        app:selectedColor="#FF0000FF"
        app:selectedBold="true"
    />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
    />
</LinearLayout>

– Create a custom Adapter inherits from PagerAdapter for controlling the ViewPager’s work, ViewPagerAdapter.java

package pete.apps.study.droid05;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewPagerAdapter extends PagerAdapter {

    private static String[] titles = new String[] {
        "Girl",
        "Dog",
        "Cat"
    };

    private static int[] images = new int[] {
        R.drawable.girl,
        R.drawable.dog,
        R.drawable.cat
    };

    private final Context context;

    public ViewPagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public String getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView view = new ImageView(this.context);
        view.setImageResource(images[position]);
        ((ViewPager) container).addView(view, 0);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((ImageView) object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

}

– Finally the MainScreen.java

ackage pete.apps.study.droid05;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Window;
import android.view.WindowManager;
import com.viewpagerindicator.TitlePageIndicator;

public class MainScreen extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.main);

        ViewPagerAdapter adapter = new ViewPagerAdapter(this);
        ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
        TitlePageIndicator title = (TitlePageIndicator) findViewById(R.id.titles);
        pager.setAdapter(adapter);
        title.setViewPager(pager);
    }
}

4. Execute the final
– Let’s build and run the code to see the results

$ ant clean debug install

C – Get source

– Get full source code at: Browse Source

 

Well, enjoy and create your amazing application !

Cheers,

Pete Houston