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 ite

Answer 1

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 ..

Answer 2

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 ?