Skizo-ozᴉʞS Skizo-ozᴉʞS - 6 days ago 6
Android Question

HorizontalScrollView or Carrousel?

I want to create a

HorizontalScrollView
, but with some "effects" in it, like this example, or this other example. The thing is that I don't know how many items I'll have to use; I get the
ImageView
from an API so it should be dynamic. How can I make that effect that if it's selected it becomes bigger with the
TextView
below? The closest example I found on SO is here. That's exactly what I need, but I've tested the answer given and it doesn't work for me ... but the image from the question is exactly what I want. Can anyone guide me to do this?

Let's say I'll test it with 5
ImageView
ONLY FOR TESTING, so an example to how to add those
ImageView
dynamically would be good for me as well.

Another example would be Snapchat APP but the difference is that I would like to add some effect on the selected like make it bigger or something.

EDIT



I would like to get an example to how to do like a custom HorizontalScrollView with a Layout (adapter) and the most important if it's possible add an efect to the clicked one, and I want the adapter because I'll need to get the item clicked of course. The thing that I think I should use a RecycleView as @UncaughtException said to me because I don't know how much images I'll get and I'll have to put on my APP so I think this is the solution.

It would be a mix between Snapchat HoritzontalScrollView and This image from a SO question

Answer

Step 1:

Display the images horizontally in a ViewPager.

Step 2:

Apply the ScaleAnimation class to the clicked item to zoom in on it. This can be done in the instantiateItem() method of the ViewPager's PagerAdapter.

Also, there are some ready-to-use open source widgets available like CoverFlow and FancyCoverFlow. You might want to check out the source code to see how they work.

EDIT:

Firstly, regarding your question of how to handle an unknown number of images, you should realize that in all such widgets (ListView, GridView, ViewPager etc.), the number of objects coming from the API is always unknown at first, i.e. it becomes known when then API response is received. So if you first implement a ViewPager in the normal way, you will see how this is handled. Basically you have to use an Adapter and a model object to populate the ViewPager or ListView. The API response will be either JSON or XML, and after parsing it, you will know the exact number of items.

So I think you should start with first implementing a ViewPager in the normal way. There are any number of examples available for this. Two interesting ones are this one and this one. They are interesting for your case because they also contain example code of how to enlarge the image.

Now coming to the second problem: how do we enlarge the image. To do this, one way is to use the ScaleAnimation class. For example, say you want to enlarge an image by 100% around its center:

ScaleAnimation scaleAnimation =  new ScaleAnimation(1.0f, 1.5f,
                                                    1.0f, 1.5f,
                                                        Animation.RELATIVE_TO_SELF, 0.5f,
                                                        Animation.RELATIVE_TO_SELF, 0.5f);

scaleAnimation.setDuration(200);
scaleAnimation.setInterpolator(new AccelerateDecelerateInterpolator());

imageView.startAnimation(scaleAnimation);

I would use this code on the image in the instantiateItem() method of the ViewPager's PagerAdapter. This should work. Or you can try the zoom animation approach in one of the two previous examples.

I'm afraid you'll have to try to create a working project using these examples as a guide. Then we can further discuss any other problems you face. I'm sure that this can be done quite easily, and I know you can do it. Best ...

EDIT 2:

As per the two examples that you have given, have you seen this and this? Is that what you're looking for ? And does it bring you any closer to solving the problem ?

Comments