Archive

Posts Tagged ‘viewpagerindicator’

Create application with Swipe gesture to navigate page like Google Play

December 26, 2012 4 comments

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

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

 

Advertisements

Build ViewPagerIndicator with Ant

December 26, 2012 Leave a comment

ViewPagerIndicator is one of the great libraries that helps to indicate the page status of when using ViewPager.

If you want to know more about it, visit the developers’ homepage: http://viewpagerindicator.com/

By default, it’s set to build with Maven, not Ant. So in order to build with Ant, you should do the following steps:

1. Download the package and extract it, you can click here to download,

or you can checkout it source code from developers’  branch: https://github.com/JakeWharton/Android-ViewPagerIndicator

Then name the directory, I named it: ~/ViewPagerIndicator

2. Navigate to this directory and start to create the project settings and build.xml for Ant build:

$ cd ViewPagerIndicator

$ android update project -p library/
Updated local.properties
No project name specified, using project folder name 'library'.
If you wish to change it, edit the first line of build.xml.
Added file ~/ViewPagerIndicator/library/build.xml
Added file ~/ViewPagerIndicator/library/proguard-project.txt

3. Build the sample source code and run it!

$ android update project -p sample/
Updated local.properties
No project name specified, using Activity name 'ListSamples'.
If you wish to change it, edit the first line of build.xml.
Added file ~/ViewPagerIndicator/sample/build.xml
Added file ~/ViewPagerIndicator/sample/proguard-project.txt

$ cd sample

$ ant clean

$ ant debug install

Now open your device and run the sample to enjoy the features that the library brings.

@p/s: Thanks Jake Wharton for this cool library and his support.

 

Cheers,
Pete Houston