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();   

Answer 3

Maybe I'm wrong, but you can use an overridePendingTransition in this sub activity ?

In your main activity :

public void onItemSelected(String id) {
    Intent myIntent= new Intent(this, MySubActivity.class);
        myIntent.putExtra("param1", param1); // some parameters
        startActivityForResult(myIntent, 0);
}

Or whatever code you want. The main thing is in your subactivity (and subview) like in MySubActivity :

protected void onCreate(Bundle savedInstanceState) {
    ...
    // autogenerated code and your code here
    ...
    this.overridePendingTransition(R.anim.enter_from_right, R.anim.exit_to_left);
 }

Here are the animation files in the res/anim folder

enter_from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="700"/>
</set>

exit_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="700"/>
</set>

Hope that helps.

Answer 4

Just small addition to Ryan's response (Using ViewFlipper):

public void onShowRight(View v) {
    flipper.setInAnimation(inFromRightAnimation());
    flipper.setOutAnimation(outToLeftAnimation());
    flipper.showNext();         
}

public void onShowLeft(View v) {
    flipper.setInAnimation(inFromLeftAnimation());
    flipper.setOutAnimation(outToRightAnimation());
    flipper.showPrevious();         
}