Item getting bigger when sliding ListView

Question

I would like to implement a list effect in android as the one displayed in the Ultravisual Iphone app :

The similar effect can be view on the Expo Milano 2015 app in android.

I would like the top item get bigger when sliding down the ListView.

I have no idea how this can be done... Is it an animation on the first item in the current view?

If someone has an example or a clue to achieve this, it will be great!

Thanks

Answer 1

Well I tried to achieve that effect and it looked like this:

First you need to start defining your max and min font size. I did this:

private final int MAX_FONTSIZE=50;
private final int MIN_FONTSIZE=12;

Next you need to save your screen total height. On your onCreate save it like this:

    WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    mScreenHeight = size.y;

Then override your listview onScroll event and do something like this:

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {
            if(listview.getChildCount()>0)
            for(int i=0;i<listview.getChildCount();i++)
            {
                float font = Math.min(Math.max(MAX_FONTSIZE - (float)(((MAX_FONTSIZE-MIN_FONTSIZE)/(mScreenHeight*0.3)))*Math.max(listview.getChildAt(i).getTop(),0),MIN_FONTSIZE),MAX_FONTSIZE);
                ((TextView)listview.getChildAt(i)).setTextSize(font);
            }
        }

The 0.3 means that at about 30% of your screen it will always be the minimum font size. You can tweak that value for whatever you want. Remember that listview.getChildAt(i) will return the view that you inflate on your adapter. In my case it's just a simple textview, that's why it's safe to cast it to TextView. You might need to call findViewById to get your textview.

You also might need to make the TextView centered so it looks prettier.

EDIT:

Since op want to change the view's size (which should not be used with this code) here is some hack you can do. Start by changing your min/max constants to what you want (100 & 250). Then proceed to create a flag that controls if the listview is scrolling or not. On your onScrollStateChanged add this line isScrolling= i == SCROLL_STATE_TOUCH_SCROLL || i == SCROLL_STATE_FLING; where i is the second parameter of the onScrollStateChanged. Next change the line to if(listview.getChildCount()>0 && isScrolling). The next step is to change the view height. To do this you have to change it's layoutParams.

listview.getChildAt(i).setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, Math.round(font * getResources().getDisplayMetrics().density)));

Remember this is, like I said, a simple hack. This is not, by far, the best solution to this. But since it's a complex thing to do let's stick with the basics.