How can I make a cell in a ListView in Android expand and contract vertically when it's touched?

Question

I have a cell in a ListView that has a bunch of text in it. I show the first two rows of text and then end it with a "..." if it goes beyond. I want a user to be able to touch the cell and have it expand dynamically within the view, displaying all of the data. Then when they touch the cell again, it contracts back to it's normal size.

I've seen an iOS app do this and it's very cool. Is there any way to do this with Android? How?

Solution 1

I've implemented a simple code that works in all Android's sdk versions.

See below its working and the code.

Github code: https://github.com/LeonardoCardoso/Animated-Expanding-ListView

For information on my website: http://android.leocardz.com/animated-expanding-listview/

Basically, you have to create a custom TranslateAnimation and a Custom List Adapter and, while it's animating, you have to update the current height of listview item and notify the adapter about this change.

Let's go to the code.

1. List Item layout

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/text_wrap"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal"
          android:paddingBottom="@dimen/activity_vertical_margin"
          android:paddingLeft="@dimen/activity_horizontal_margin"
          android:paddingRight="@dimen/activity_horizontal_margin"
          android:paddingTop="@dimen/activity_vertical_margin" >
   
          <TextView
              android:id="@+id/text"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:textSize="18sp" >
          </TextView>
   
   </LinearLayout>
   

2. Activity Layout

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".MainActivity" >
   
             <ListView
                 android:id="@+id/list"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:divider="@android:color/black"
                 android:dividerHeight="3dp" >
             </ListView>
   
         </RelativeLayout>
   

3. List Item class

   public class ListItem {
   
   private String text;
   private int collapsedHeight, currentHeight, expandedHeight;
   private boolean isOpen;
   private ListViewHolder holder;
   private int drawable;
   
   public ListItem(String text, int collapsedHeight, int currentHeight,
           int expandedHeight) {
       super();
       this.text = text;
       this.collapsedHeight = collapsedHeight;
       this.currentHeight = currentHeight;
       this.expandedHeight = expandedHeight;
       this.isOpen = false;
       this.drawable = R.drawable.down;
   }
   
   public String getText() {
       return text;
   }
   
   public void setText(String text) {
       this.text = text;
   }
   
   public int getCollapsedHeight() {
       return collapsedHeight;
   }
   
   public void setCollapsedHeight(int collapsedHeight) {
       this.collapsedHeight = collapsedHeight;
   }
   
   public int getCurrentHeight() {
       return currentHeight;
   }
   
   public void setCurrentHeight(int currentHeight) {
       this.currentHeight = currentHeight;
   }
   
   public int getExpandedHeight() {
       return expandedHeight;
   }
   
   public void setExpandedHeight(int expandedHeight) {
       this.expandedHeight = expandedHeight;
   }
   
   public boolean isOpen() {
       return isOpen;
   }
   
   public void setOpen(boolean isOpen) {
       this.isOpen = isOpen;
   }
   
   public ListViewHolder getHolder() {
       return holder;
   }
   
   public void setHolder(ListViewHolder holder) {
       this.holder = holder;
   }
   
   public int getDrawable() {
       return drawable;
   }
   
   public void setDrawable(int drawable) {
       this.drawable = drawable;
   }
   }
   

4. View Holder class

   public class ListViewHolder {
    private LinearLayout textViewWrap;
    private TextView textView;
   
    public ListViewHolder(LinearLayout textViewWrap, TextView textView) {
       super();
       this.textViewWrap = textViewWrap;
       this.textView = textView;
    }
   
    public TextView getTextView() {
           return textView;
    }
   
    public void setTextView(TextView textView) {
       this.textView = textView;
    }
   
    public LinearLayout getTextViewWrap() {
       return textViewWrap;
    }
   
    public void setTextViewWrap(LinearLayout textViewWrap) {
       this.textViewWrap = textViewWrap;
    }
   }
   

5. Custom Animation class

       public class ResizeAnimation extends Animation {
       private View mView;
       private float mToHeight;
       private float mFromHeight;
   
       private float mToWidth;
       private float mFromWidth;
   
       private ListAdapter mListAdapter;
       private ListItem mListItem;
   
       public ResizeAnimation(ListAdapter listAdapter, ListItem listItem,
               float fromWidth, float fromHeight, float toWidth, float toHeight) {
           mToHeight = toHeight;
           mToWidth = toWidth;
           mFromHeight = fromHeight;
           mFromWidth = fromWidth;
           mView = listItem.getHolder().getTextViewWrap();
           mListAdapter = listAdapter;
           mListItem = listItem;
           setDuration(200);
       }
   
       @Override
       protected void applyTransformation(float interpolatedTime, Transformation t) {
           float height = (mToHeight - mFromHeight) * interpolatedTime
                   + mFromHeight;
           float width = (mToWidth - mFromWidth) * interpolatedTime + mFromWidth;
           LayoutParams p = (LayoutParams) mView.getLayoutParams();
           p.height = (int) height;
           p.width = (int) width;
           mListItem.setCurrentHeight(p.height);
           mListAdapter.notifyDataSetChanged();
       }
     }
   

6. Custom List Adapter class

   public class ListAdapter extends ArrayAdapter<ListItem> {
   private ArrayList<ListItem> listItems;
   private Context context;
   
   public ListAdapter(Context context, int textViewResourceId,
       ArrayList<ListItem> listItems) {
   super(context, textViewResourceId, listItems);
   this.listItems = listItems;
   this.context = context;
   }
   
   @Override
   @SuppressWarnings("deprecation")
   public View getView(int position, View convertView, ViewGroup parent) {
   ListViewHolder holder = null;
   ListItem listItem = listItems.get(position);
   
   if (convertView == null) {
       LayoutInflater vi = (LayoutInflater) context
               .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
       convertView = vi.inflate(R.layout.list_item, null);
   
       LinearLayout textViewWrap = (LinearLayout) convertView
               .findViewById(R.id.text_wrap);
       TextView text = (TextView) convertView.findViewById(R.id.text);
   
       holder = new ListViewHolder(textViewWrap, text);
   } else
       holder = (ListViewHolder) convertView.getTag();
   
   holder.getTextView().setText(listItem.getText());
   
   LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT,
           listItem.getCurrentHeight());
   holder.getTextViewWrap().setLayoutParams(layoutParams);
   
   holder.getTextView().setCompoundDrawablesWithIntrinsicBounds(
           listItem.getDrawable(), 0, 0, 0);
   
   convertView.setTag(holder);
   
   listItem.setHolder(holder);
   
   return convertView;
   }
   
   }
   

7. Main Activity

   public class MainActivity extends Activity {
   
   private ListView listView;
   private ArrayList<ListItem> listItems;
   private ListAdapter adapter;
   
   private final int COLLAPSED_HEIGHT_1 = 150, COLLAPSED_HEIGHT_2 = 200,
       COLLAPSED_HEIGHT_3 = 250;
   
   private final int EXPANDED_HEIGHT_1 = 250, EXPANDED_HEIGHT_2 = 300,
       EXPANDED_HEIGHT_3 = 350, EXPANDED_HEIGHT_4 = 400;
   
   private boolean accordion = true;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   
   listView = (ListView) findViewById(R.id.list);
   
   listItems = new ArrayList<ListItem>();
   mockItems();
   
   adapter = new ListAdapter(this, R.layout.list_item, listItems);
   
   listView.setAdapter(adapter);
   
   listView.setOnItemClickListener(new OnItemClickListener() {
   
       @Override
       public void onItemClick(AdapterView<?> parent, View view,
               int position, long id) {
           toggle(view, position);
       }
   });
   }
   
   private void toggle(View view, final int position) {
   ListItem listItem = listItems.get(position);
   listItem.getHolder().setTextViewWrap((LinearLayout) view);
   
   int fromHeight = 0;
   int toHeight = 0;
   
   if (listItem.isOpen()) {
       fromHeight = listItem.getExpandedHeight();
       toHeight = listItem.getCollapsedHeight();
   } else {
       fromHeight = listItem.getCollapsedHeight();
       toHeight = listItem.getExpandedHeight();
   
       // This closes all item before the selected one opens
       if (accordion) {
           closeAll();
       }
   }
   
   toggleAnimation(listItem, position, fromHeight, toHeight, true);
   }
   
   private void closeAll() {
   int i = 0;
   for (ListItem listItem : listItems) {
       if (listItem.isOpen()) {
           toggleAnimation(listItem, i, listItem.getExpandedHeight(),
                   listItem.getCollapsedHeight(), false);
       }
       i++;
   }
   }
   
   private void toggleAnimation(final ListItem listItem, final int position,
       final int fromHeight, final int toHeight, final boolean goToItem) {
   
   ResizeAnimation resizeAnimation = new ResizeAnimation(adapter,
           listItem, 0, fromHeight, 0, toHeight);
   resizeAnimation.setAnimationListener(new AnimationListener() {
   
       @Override
       public void onAnimationStart(Animation animation) {
       }
   
       @Override
       public void onAnimationRepeat(Animation animation) {
       }
   
       @Override
       public void onAnimationEnd(Animation animation) {
           listItem.setOpen(!listItem.isOpen());
           listItem.setDrawable(listItem.isOpen() ? R.drawable.up
                   : R.drawable.down);
           listItem.setCurrentHeight(toHeight);
           adapter.notifyDataSetChanged();
   
           if (goToItem)
               goToItem(position);
       }
   });
   
   listItem.getHolder().getTextViewWrap().startAnimation(resizeAnimation);
   }
   
   private void goToItem(final int position) {
   listView.post(new Runnable() {
       @Override
       public void run() {
           try {
               listView.smoothScrollToPosition(position);
           } catch (Exception e) {
               listView.setSelection(position);
           }
       }
   });
   }
   
   private void mockItems() {
   listItems
           .add(new ListItem(
                   "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                   COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                   EXPANDED_HEIGHT_1));
   
   listItems
           .add(new ListItem(
                   "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                   COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                   EXPANDED_HEIGHT_2));
   
   listItems
           .add(new ListItem(
                   "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                   COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                   EXPANDED_HEIGHT_3));
   
   listItems
           .add(new ListItem(
                   "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
                   COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                   EXPANDED_HEIGHT_4));
   
   listItems
           .add(new ListItem(
                   "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
                   COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                   EXPANDED_HEIGHT_4));
   
   listItems
           .add(new ListItem(
                   "Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
                   COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                   EXPANDED_HEIGHT_4));
   
   listItems
           .add(new ListItem(
                   "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
                   COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                   EXPANDED_HEIGHT_3));
   
   listItems
           .add(new ListItem(
                   "Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
                   COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                   EXPANDED_HEIGHT_4));
   
       }
   
   }
   

Solution 2

Here is example from Udinic. It had listview item expand with animation and require API level only 4+

ExpandAnimationExample

in onItemClick event use ExpandAnimation

/**
* This animation class is animating the expanding and reducing the size of a view.
* The animation toggles between the Expand and Reduce, depending on the current state of the view
* @author Udinic
*
*/
public class ExpandAnimation extends Animation {
    private View mAnimatedView;
    private LayoutParams mViewLayoutParams;
    private int mMarginStart, mMarginEnd;
    private boolean mIsVisibleAfter = false;
    private boolean mWasEndedAlready = false;

    /**
* Initialize the animation
* @param view The layout we want to animate
* @param duration The duration of the animation, in ms
*/
    public ExpandAnimation(View view, int duration) {

        setDuration(duration);
        mAnimatedView = view;
        mViewLayoutParams = (LayoutParams) view.getLayoutParams();

        // decide to show or hide the view
        mIsVisibleAfter = (view.getVisibility() == View.VISIBLE);

        mMarginStart = mViewLayoutParams.bottomMargin;
        mMarginEnd = (mMarginStart == 0 ? (0- view.getHeight()) : 0);

        view.setVisibility(View.VISIBLE);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        if (interpolatedTime < 1.0f) {

            // Calculating the new bottom margin, and setting it
            mViewLayoutParams.bottomMargin = mMarginStart
                    + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

            // Invalidating the layout, making us seeing the changes we made
            mAnimatedView.requestLayout();

        // Making sure we didn't run the ending before (it happens!)
        } else if (!mWasEndedAlready) {
            mViewLayoutParams.bottomMargin = mMarginEnd;
            mAnimatedView.requestLayout();

            if (mIsVisibleAfter) {
                mAnimatedView.setVisibility(View.GONE);
            }
            mWasEndedAlready = true;
        }
    }
}

Detail usage is in project.

Comments

[ahodder]

That makes ALL of the items expandable. I don't think that is what op wants. based on the picture.

[Leandros]

Oh, well, I forgot. But you only need to select the selected an apply the code on these single item.

[ahodder]

Could, but that is a ton of hassle. ExpandableListViews are not easy things to do. They require a TON of work. :-/

[Leandros]

Agree to this. I did it once and will never do it again. ;)

[caiocpricci2]

What exactly is so complicated with ExpandableListViews? I've never used it but it seems quite straightforward. Any heads up for problems I might get myself into?

[Ethan Allen]

The number of rows are unknown.

[ahodder]

@EthanAllen The number of rows MUST be known to some extent. You can use this knowledge for what @,you786 is mentioning.

[ahodder]

@gameowner I don't think that the ExpandableAdapter is... organized. That's not quite right, but close. They are just a pain, and I have never made one look good. I guess it comes down to personal preference. I would rather just animate the view open in a single ListView.

[marienke]

This looks like a GREAT solution! Too bad I need a solution for use in Eclipse :(

[Leonardo Cardoso]

@marienke Well, so all you need is to copy the code that is on this post and add to your code.

[marienke]

So no Gradle or library reference? Just copy the code? Cool. Will try! Thanks.

[Jameson]

One small correction. In step (5), Custom Animation Class, you declare the instance variable mListAdapter as a ListAdapter, but later use the method notifyDataSetChanged(), which cannot be used with ListAdapters. Rather, it is used with ArrayAdapters. I looked at your project on GitHub, and that version was correct, using an ArrayAdapter.

[dopatraman]

Thank you for this. One question though, how is the default listItem height set to the collapsed height value? I don't see how you are doing this.

[Betty Crokker]

This code is brilliant, except for the hard-coded values for the collapsed and expanded heights. Unfortunately, I'm enough of an Android newbie that despite lots of reading of documents and trying things in code, I can't figure out how to calculate the heights based on the actual text I'm putting in each list box ... I created a StackOverflow question "Android - measure height of text" asking this question but apparently I am such a newbie I'm not even asking the question "right" ...

[Leonardo Cardoso]

@BettyCrokker It's just an example. You can export it to dimen.xml.

[Betty Crokker]

I don't see how that helps ... they are still hard-coded numbers, just stored in XML instead of Java? In my application, the different list items will have different amounts of text in them, so I can't hard-code list item heights. I really need to calculate the heights ...

[Betty Crokker]

I figured out how to calculate the collapsed height, it's in my StackOverflow question "Android - measure height of text".

[IntoTheDeep]

Listview did not resize on that animation

[Trung Nguyen]

@TeodorKolev: Question is about listview's item not listview itself

[IntoTheDeep]

My point is that when I have three items and first is expanded, I don't see last one

[Tara]

I tried this solution but at a time many cells are expanding. The cells which are next to the last item which is visible on the screen. Means if I expands 1st item then 7th item, 17th item and so on expanding. Please help me out in this.

[Tara]

can you assist with sample code. I am using LinearLyaoutOnClick which is there in ViewHolder Class. how to get list position?

[asitis]

This one is super cool. Really great work & explanation. Thank you