Android ListView - Slide Subview in from Right?

Question

I have a ListView. When I select an item in the ListView, I would like to have a Subview slide in from the right, the way that it does in many Apps.

I have been searching for tutorials on this topic but am spinning my wheels. Maybe Android uses a term different than "Subview" ?

Here's what I ended up doing:

1. Create a New Class for the SubView

2. Add the Subview class to the Manifest with <activity android:name=".SubViewClassName" /> inside the <application> tag

3. Add this to the main Class ("lv" is the ListView)

   lv.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView parent, View view,int position, long id) {

          Intent myIntent = new Intent(view.getContext(),SubView.class);
   
          startActivityForResult(myIntent, 0);  
   
   
      } 
   

   });

Answer 1

The simplest thing is to have your second ListView be in a separate Activity. If the user has inter-activity animations enabled (and that is the default), then your second ListView will slide in from the right.

Answer 2

For this to work you will need to use a ViewFlipper

Here is how you would set up your main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/flipper" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:versionCode="1" android:versionName="1.0">
  <include android:id="@+id/first" layout="@layout/home_screen" />
  <include android:id="@+id/second" layout="@layout/info_screen" />
</ViewFlipper>

The xml files for the two views are home_screen and info_screen in this case. You can name them anything you'd like.

In your code you will need to place this in your onCreate() method:

flipper = (ViewFlipper) findViewById(R.id.flipper);

Additionally you need these methods below your onCreate() method.

    private Animation inFromRightAnimation() {

    Animation inFromRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromRight.setDuration(800);
    inFromRight.setInterpolator(new AccelerateInterpolator());
    return inFromRight;
}
private Animation outToLeftAnimation() 
{
    Animation outtoLeft = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    outtoLeft.setDuration(800);
    outtoLeft.setInterpolator(new AccelerateInterpolator());
    return outtoLeft;
}
private Animation inFromLeftAnimation() {
    Animation inFromLeft = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromLeft.setDuration(800);
    inFromLeft.setInterpolator(new AccelerateInterpolator());
    return inFromLeft;
}
private Animation outToRightAnimation() {
    Animation outtoRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    outtoRight.setDuration(800);
    outtoRight.setInterpolator(new AccelerateInterpolator());
    return outtoRight;
}   

And when you're ready simply use

flipper.setInAnimation(inFromRightAnimation());
flipper.setOutAnimation(outToRightAnimation());
flipper.showNext();