Simple tutorial for a „smooth horizontal view slider“ with Android

Screenshot of a horizontal sliderSurely you have seen some Android apps which have this cool feature to scroll through different Views smoothly with a horizontal swipe. If you have some Views and you want them to be „slide-able“ you can do this quite easily actually.

Because this feature is not in Android 2.x you will need to use the compatibility pack from Android. It is a library with classes from Android 3. It is called „android-support-v13.jar“. You can download this JAR file from developer.android.com or just download the sample project from this site which also contains this JAR file.

Create a new project and add android-support-v13.jar to its build path. First we need a FragmentPagerAdapter. Create a class according to the code below:

MyPagerAdapter.java

public class MyPagerAdapter extends FragmentPagerAdapter {

private final List<Fragment> fragments;

/**
* @param fm
* @param fragments
*/
public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}

/*
* (non-Javadoc)
*
* @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
*/
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}

/*
* (non-Javadoc)
*
* @see android.support.v4.view.PagerAdapter#getCount()
*/
@Override
public int getCount() {
return this.fragments.size();
}
}

Next you have to create a class which handles the different Fragments (i.e. the separate „Views“). This class is going to be your Activity class.

ViewPagerFragmentActivity.java

public class ViewPagerFragmentActivity extends FragmentActivity {

private PagerAdapter mPagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.viewpager_layout);

// initialize the pager
this.initialisePaging();
}

/**
* Initialize the fragments to be paged
*/
private void initialisePaging() {

List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, Fragment0.class.getName()));
fragments.add(Fragment.instantiate(this, Fragment1.class.getName()));
fragments.add(Fragment.instantiate(this, Fragment2.class.getName()));
this.mPagerAdapter = new MyPagerAdapter(super.getSupportFragmentManager(), fragments);

ViewPager pager = (ViewPager) super.findViewById(R.id.viewpager);
pager.setAdapter(this.mPagerAdapter);
}
}

viewpager_layout.xml

<?xml version="1.0" encoding="utf-8"?>

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

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

Eclipse will mark some errors. This is because the Fragment classes have not created yet. But this is what we are going to do right now. Create as many classes as you wish to have in your slider. In my example we use the classes Fragment0, Fragment1 and Fragment2. If you want to use any other classes make sure to include them in the code in the ViewPagerFragmentActivity.java class.

Fragment0.java, Fragment1.java, Fragment2.java

public class Fragment0 extends Fragment {
/**
* (non-Javadoc)
*
* @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater,
* android.view.ViewGroup, android.os.Bundle)
*/
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return (LinearLayout) inflater.inflate(R.layout.fragment0_layout, container, false);
}
}

As for the XML Layouts you can design them however you like.

Lastly add the classes ViewPagerFragmentActivity, Fragment0, Fragment1 and Fragment2 to the manifest file.

That’s all. The app should work already allowing you to slide through the Fragment classes smoothly with a horizontal swipe.

If you’re lazy you can as well just download the whole demo project here:
HorizontalSmoothSliderExample

If you already have a FragmentPagerAdapter and want to use your already existing Activity classes als Fragments you can use my other tutorial here:
How to convert an Activity class to use with FragmentPagerAdapter

About Dominik
Currently working as an Android/iOS developer for Cineman, Switzerland. Owner of http://www.ukon.ch and https://play.google.com/store/apps/details?id=com.cheatdatabase

Comments

5 Responses to “Simple tutorial for a „smooth horizontal view slider“ with Android”
  1. zerntrino sagt:

    I can’t run this in my phone and my emulator.

    logcat:

    04-14 19:09:48.578: D/AndroidRuntime(16131): Shutting down VM
    04-14 19:09:48.578: W/dalvikvm(16131): threadid=1: thread exiting with uncaught exception (group=0x40a491f8)
    04-14 19:09:48.609: E/AndroidRuntime(16131): FATAL EXCEPTION: main
    04-14 19:09:48.609: E/AndroidRuntime(16131): java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{slider.example/slider.example.ViewPagerFragmentActivity}: java.lang.ClassNotFoundException: slider.example.ViewPagerFragmentActivity
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1880)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1981)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread.access$600(ActivityThread.java:123)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1147)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.os.Handler.dispatchMessage(Handler.java:99)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.os.Looper.loop(Looper.java:137)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread.main(ActivityThread.java:4424)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at java.lang.reflect.Method.invokeNative(Native Method)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at java.lang.reflect.Method.invoke(Method.java:511)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:787)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:554)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at dalvik.system.NativeStart.main(Native Method)
    04-14 19:09:48.609: E/AndroidRuntime(16131): Caused by: java.lang.ClassNotFoundException: slider.example.ViewPagerFragmentActivity
    04-14 19:09:48.609: E/AndroidRuntime(16131): at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:61)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at java.lang.ClassLoader.loadClass(ClassLoader.java:501)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at java.lang.ClassLoader.loadClass(ClassLoader.java:461)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.Instrumentation.newActivity(Instrumentation.java:1023)
    04-14 19:09:48.609: E/AndroidRuntime(16131): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1871)
    04-14 19:09:48.609: E/AndroidRuntime(16131): … 11 more
    04-14 19:09:52.488: I/Process(16131): Sending signal. PID: 16131 SIG: 9

  2. Msuhl sagt:

    Hi
    First of all – Thank you for this tutorial. It was exactly what I was looking for.

    In the beginning I had some problems with running the project and wanted to leave a link to the solution i case any other had the same problem.

    Apparently there is a problem with Android SDK Tools r17. You can see the solution here: http://stackoverflow.com/questions/9931040/fragmentactivity-causing-classnotfoundexception/9967358#9967358

    Thanks again for a great tutorial 🙂
    Msuhl

Trackbacks

Check out what others are saying about this post...
  1. […] You can find a tutorial how to create a smooth horizontal slider here: Simple tutorial for a “smooth horizontal view slider” with Android […]

  2. […] For additional information I would recommend you taking a look to Fragments and FragmentActivity in Android, here goes a link to an example that uses both Fragments and FragmentActivity but there are plenty on the internet: http://www.e-nature.ch/tech/?p=6 […]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

You must be logged in to post a comment.