HorizontalScrollView or Carrousel?

Question

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 1

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 ?

Answer 2

In your case definitely you can use ViewPager, but if i were you i would go for RecyclerView with a LinearLayoutManager with its orientation set to Horizontal, so you will not need an HorizontalScrollView, and using RecyclerView you will also get the adapter thing you are looking for..

Now in order to scale or show some other effect on click to differentiate it from others, you can Animate that particular view,

I have written some demo code for that , posting here the required files , let me know if this is what you want,

Activity

/**
  * Created by Satyen on 10/27/15.
  **/
public class SlidingDrawerActivity extends Activity {

   RecyclerView rcyList;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_scroll_list);

        rcyList = (RecyclerView) findViewById(R.id.rcyList);

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        rcyList.setLayoutManager(layoutManager);

       /* rcyList.addItemDecoration(
                new DividerItemDecoration(this, null));*/
        MyRecyclerViewAdapter myRecyclerAdapter = new MyRecyclerViewAdapter(this);
        rcyList.setAdapter(myRecyclerAdapter);

    }


}

Activity Layout

<!-- layout_scroll_list.xml -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_weight="1">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcyList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/holo_blue_dark"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />

</FrameLayout>
</LinearLayout>

Adapter

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.CustomViewHolder> {

private Context mContext;
View animatedView = null;

public MyRecyclerViewAdapter(Context context) {
    this.mContext = context;
}

@Override
public CustomViewHolder onCreateViewHolder(ViewGroup viewGroup, final int i) {
    final View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, null);


    CustomViewHolder viewHolder = new CustomViewHolder(view);
    /*final Animation a = AnimationUtils.loadAnimation(mContext, R.anim.scale_up);*/
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            // You can tweak with the effects here
            if (animatedView == null) {
                animatedView = view;
            } else {
                animatedView.setAnimation(null);
                animatedView = view;
            }
            ScaleAnimation fade_in = new ScaleAnimation(1f, 1.3f, 1f, 1.3f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            fade_in.setDuration(100);     // animation duration in milliseconds
            fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            view.startAnimation(fade_in);
        }
    });
    return viewHolder;
}

@Override
public void onBindViewHolder(CustomViewHolder customViewHolder, int i) {
    //Setting text view title
    customViewHolder.textView.setText("Data No. " + i);
}

@Override
public int getItemCount() {
    return 10;
}

public class CustomViewHolder extends RecyclerView.ViewHolder {
    protected ImageView imageView;
    protected TextView textView;

    public CustomViewHolder(View view) {
        super(view);
        this.imageView = (ImageView) view.findViewById(R.id.thumbnail);
        this.textView = (TextView) view.findViewById(R.id.title);
    }
}
}

Adapter Row Layout

<!-- list_row.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/thumbnail"
        android:layout_centerHorizontal="true"
        android:text="dafdafda"
        android:textColor="#222"
        android:textSize="12sp" />

</RelativeLayout>

</LinearLayout>

Other than you can also use TwoWayView that gives the functionality of implementing HorizontalListView,

Above is just some demo code which may require some tweaks, let me know if this helps or ask further ...

Also adding the screenshots of the output ..