50 comments on “Cool toolbar for ListView items

  1. I have used this code. Thanks a lot. But I want to do the following:
    When the user click the second item to expand. The first item that have been clicked will close. How do I do that?

  2. Ok I did it like this:

    if(expanded != null)
    {
    View close = expanded.findViewById(R.id.toolbar);
    // Creating the expand animation for the item
    ExpandAnimation expandAni_close = new ExpandAnimation(close, 500);

    // Start the animation on the toolbar
    close.startAnimation(expandAni_close);
    }

    View toolbar = v.findViewById(R.id.toolbar);
    // Creating the expand animation for the item
    ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);

    // Start the animation on the toolbar
    toolbar.startAnimation(expandAni);
    expanded = v;

    • Hey,

      There are several ways to accomplish that. I’m not quite sure how did you implement it, could you please elaborate on your solution?

      Udi.

    • I think you would need something like this:

      if (PreviousToolbar!=null) {
      ExpandAnimation tempExpandAni = new ExpandAnimation(PreviousToolbar, 500);
      PreviousToolbar.startAnimation(tempExpandAni);
      }

      View toolbar = view.findViewById(R.id.toolbar);
      // Creating the expand animation for the item
      ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);
      // Start the animation on the toolbar
      toolbar.startAnimation(expandAni);

      PreviousToolbar = toolbar;

      • Fix on my previous post (bug when the same item was clicked):
        View toolbar = view.findViewById(R.id.toolbar);

        boolean SameItemClicked = false;
        if ((PreviousToolbar==toolbar)) {
        PreviousToolbar = null;
        SameItemClicked = true;
        }
        if (PreviousToolbar!=null){
        ExpandAnimation tempExpandAni = new ExpandAnimation(PreviousToolbar, 500);
        PreviousToolbar.startAnimation(tempExpandAni);
        }

        // Creating the expand animation for the item
        ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);

        // Start the animation on the toolbar
        toolbar.startAnimation(expandAni);
        if (SameItemClicked) {
        PreviousToolbar = null;
        }
        else {
        PreviousToolbar = toolbar;
        }

      • But when I click quickly.The previous tool bar will no close. If you free,thanks for you give some tips.

  3. Ok. This is simple and great. I was trying to use this in my other app. But the ToolBar size is not always the same. You use 50dp and -50dp for bottomMargin. Can we set height=”wrap_content” and still do something like this?

    • There’s a problem with supporting unfixed sizes. I’ve tried some methods in the past to overcome this, but couldn’t. If you’ll find an elegant way – please let us know, or even fix and send a pull request.

  4. I noticed one improvement for you (in getView()):

    Change:

    : ((LinearLayout.LayoutParams) toolbar.getLayoutParams()).bottomMargin = -50;

    To something like this:

    : LinearLayout.LayoutParams params = ((LinearLayout.LayoutParams) toolbar.getLayoutParams());
    : if(!mIsOriginalBottomMarginStored)
    : {
    : mOriginalBottomMargin = params.bottomMargin; // in px
    : mIsOriginalBottomMarginStored= true;
    : }
    : params.bottomMargin = mOriginalBottomMargin; // in px

    bottomMargin value is in pixels and -50px is not equal to -50dip which was defined in the xml ;)

    This fixes noticeable animation jump (depending on the device pixel density) when an item is expanded AT THE 1ST TIME.

    Little bit more hackish code for you ;)

  5. Hi! I just use your demo.Thanks a lot.But there’s a bug.When I scroll the listview,the opened item will close. If you free, could you tell me some tips? Thanks.

  6. Hi,
    great tutorial.

    @jsmit – I am trying to use somewhat modified your code, in a way when you click on the same item, the toolbar should close.
    But, with this modifications, if I click on the same (opened toolbar) item = the code inside the onItemClick does not executes at all. Only if I click on different ListItem row.

    public void onItemClick(AdapterView parent, final View view, int position, long id) {

    Log.e(“my”, “entered onClick listItem”);

    View toolbar = view.findViewById(R.id.kursna_lista_toolbar);

    if ((previousToolbar==toolbar)) {
    previousToolbar = null;
    sameItemClicked = true;
    }
    if (previousToolbar!=null){
    Log.e(“my”, “closing some toolbar”);
    novotek.android.helper.ExpandAnimation tempExpandAni = new novotek.android.helper.ExpandAnimation(previousToolbar, 500);
    previousToolbar.startAnimation(tempExpandAni);
    }

    if (sameItemClicked) {
    previousToolbar = null;
    }
    else {
    previousToolbar = toolbar;
    }

    if (!sameItemClicked){
    Log.e(“my”, “start OPENING new”);

    novotek.android.helper.ExpandAnimation expandAni2 = new novotek.android.helper.ExpandAnimation(toolbar, 200);
    toolbar.startAnimation(expandAni2);
    previousToolbar = toolbar;
    }
    else {
    Log.e(“my”, “no need to open new – was closing”);
    previousToolbar = null;
    }
    }

    Any ideas?

    • Just one correction to be precise:

      if ((previousToolbar==toolbar)) {
      //previousToolbar = null;
      sameItemClicked = true;
      }
      Anyway, this does not effect on the problem explained…

  7. Hi Udinic, I wanted to solve this problem too. Your blog helped me getting started. Since i needed it for two projects, i decided to make a separate project to provide this functionality.

    I open sources that project on github so anybody could use it in their android app.

    https://github.com/Udinic/SmallExamples/tree/master/ExpandAnimationExample

    I still have some open issues like the ones your mentioning (animate down when opening the last item)

    Thanks a lot for your blog item! I mentioned you in the acknowledgements!

    • Questions or issues can be posted here. If you have a fix/addition to the code – you can fork the project on Github and send me a pull request.

  8. Sure, but, maybe @jsmit is not following here any more… And I somehow feel he can help resolve the issue :)

  9. i used cursor adapter and included View binder in your animation… but having click issue(gets clicked in reverse order) help me……..

  10. Man, have you solved the problem of clicking the last item, and let the expanded toolbar show?

  11. The solution if not good, while it works.

    final int temi=pos;
    getListView().postDelayed(new Runnable() {

    @Override
    public void run() {
    // TODO Auto-generated method stub
    final float densityMultiplier = getResources().getDisplayMetrics().density;
    float si_=(getListView().getBottom()-getListView().getTop())/densityMultiplier;
    // Log.d(“hi”, Integer.toString((int)si_));
    getListView().setSelectionFromTop(temi-1,(int)si_-100);
    // getListView().scrollTo(0, 100);
    }
    },350);

    • I don’t understand how this solution is applied, but need help with the problem of the last item going of the screen. Can you please advise on where this code is applied?

  12. Wow….this code is a lifesaver. I am having two problems with it so far though:

    1. When tapping on an item twice quickly, the item will begin to open, but then close again and refuses to fully open afterwards.

    2. I need to find a solution for keeping the items open after they scroll off the screen.

    Any help is greatly appreciated.

  13. this works great except I haven’t figured out how to prevent the buttons from flashing when the tool bar is collapsed. The buttons momentarily flash it’s own orange color when the toolbar is collapsed. I can’t seem to resolve this issue. Any help?

  14. Pingback: Explanation of the getView() method of an ArrayAdapter | Jisku.com - Developers Network

  15. To help those in need, I solved the double click issue I noted by adding the following to my onItemClick method:

    view.setClickable(true); //Disables click on the view again (until the animation is finished)

    View toolbar = view.findViewById(R.id.toolbar);
    if(toolbar != null){
    // Creating the expand animation for the item
    ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);

    expandAni.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationEnd(Animation arg0) {
    view.setClickable(false); //Re-enables the view after animation is complete

    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }

    @Override
    public void onAnimationStart(Animation animation) {

    }

    });

    toolbar.startAnimation(expandAni);

    Hope this helps others.

    Josh

  16. Excuse me for my english, I’m from Brazil and my English is not strong yet, I’m looking at your code but was wondering if anyone managed to solve the problem of keeping the item visible after scroll the listview, and if the issue focus Button clicked when the item is collected. I appreciate any help and I want to thank the excellent work.

  17. Pingback: Expandable Toolbar in Android ListView – Kristian Dorland

  18. Hey..thanks for the animation source! Is it possible by any chance to make the animation smoother? Right now what I’m getting is a kind-of jittery step-by-step animation.

  19. Pingback: TextView setText does not work in LinearLayout : Android Community - For Application Development

  20. I solved some of the problems mentioned in the comments the following way:

    1. Keeping the item expanded when not visible
    2. Noticeable clip on first animation run because of px | dp difference

    – removing all code from getView() in the BaseAdapter so no initialization is done when view is inflated or recycled
    – this will cause a positive margin problem and the animation will look bad on first run, therefore
    – use the following code after you get the Layout Params in the ExpandableAnimation consturctor

    if(mViewLayoutParams.bottomMargin > 0)
    mViewLayoutParams.bottomMargin = mViewLayoutParams.bottomMargin*(-1);

    Now you should have a smooth running animation each time you press an item.

    Use with previous comments for collapsing all expanded views on new click and disabling the click while the animation is still running and you should have pretty decent code.

      • Hi,

        Need to add close button when expand the item and it should close when click on the same button. Please give some idea to do that.

        Thanks

  21. hi
    Thanks for your blog.This is very useful for me.But there is a problem.Actually i can’t view all the listed items when expanding an item.Suppose,if i need to view 10 items while expanding a single item,here i can only view 7 items.What i need to do?

  22. Hi,
    I found your library today and it seems very helpful. But I have one question, the real ExpandableListView opens a list for each parent, so I tried to do the same with the SlideExpandableListView. When the Button for epanding the list it pressed, it should display a ListView. But I am confronted with two problems:

    1) It seems that the measured height is always 48px for the ListView, so that only the first child can be displayed, only when I set the height fixed on e.g. 150 dp some items will be displayed, but there comes the second problem

    2) I tried to scroll in the list view but I have no chance to do this

    Did I something wrong or do I have to set a fixed size for all childrens? I hope you have a solution for my little problem :)

  23. Pingback: Explanation of the getView() method of an ArrayAdapter - Tech Forum Network

  24. Pingback: Issue trying to make a list expandable in android | BlogoSfera

  25. Hi,

    this animation lib is great and helpful for my project..
    i’ve added an arrow(both up and down arrows) to one imageview for each listitem, so i should make ‘up’ arrow visible when dropped down. similarly other case..

    how to acheive this?? please suggest any way..

  26. Hi,

    This animation looks great and very helpful for my project.Thanks for your valuable post at the same time ,shared the code.Rocks…..

  27. Hi Udinic,

    Thanks for this excellent post, your code is very useful for me. I need a clarification for this… I need to close the previous opened layout when the second item click(as per Said Tahsin Dane said). i go through this entire discussion unfortunately i can’t get clear, can you please tell me which code and where i place the code to achieve my need. So far you discussed about previousToolbar, frankly don’t know where i need to initialize. Please send the reply as soon as possible.

  28. Hey,

    I was hoping you might be able to point me into the right direction for this issue that I am running into.

    When I click an item in my list view, I can see the 4 buttons appear, but they sort of appear over the list view item, sort of like there is no expanding animation happening.

    I am using a linear layout for the toolbar like you have outlined, but in my custom list view item xml file, I am using a relative layout if that is of any use.

    Thanks!

  29. I am using your solution in a slightly adapted manner: as some commenters above, i have implemented a “one-item-only” thing and the toolbar ist also completely replacing the upper view. But one thing is annoying: The opened list item closes itself automatically if it gets out of sight. Can i prevent this behaviour?

    • I need a help from you regarding Calendar App.In Cal App they did a calendar in a wonderful way.By default the current week is displaying in the calendar, when a user drag a finger it will expand into the month view like vice versa. Please have a look and help me out.

  30. Hi..

    I have one issue when i open the any row and scroll listview through the end and coming back to the opened row then that row is gets closed.i want the row to be open if i scroll through the item how to fix this. and also i want only one item to be open at a time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s