Gallery: Effect in item selected

Question

I need to have an scroll with items together, and the selected item should expand a part down.

I am currently using a Gallery (I tried with viewflow and viewpager, but the items have much space between them), but I need to know how can I do this effect.

I have 2 ideas, but i don't know how can I implement it.

1) The expandable part is a LinearLayout with visibility=gone, and when the item is selected, this layout should be visible. (Gallery do not have "onItemSelectedListener")

2) Treat each element as a fragment (once I use a Viewpager that use this, https://github.com/mrleolink/SimpleInfiniteCarousel)

It does not necessarily have to be a gallery, any idea is welcome

I am working on an Activity.

Answer 1

Depends on the behavior that you want. Some questions can more than one item be expanded at a time? Do you want the views to be paged (snap into place) or smooth scroll them?

One Suggestion I have is to make a custom view for the individual cells. Then add them programmatically to a HorizontalScrollView Object.

 HorizontalScrollView hsv = new HorizontalScrollView(activity);
 LinearLayout hll = new LinearLayout(activity);
 hll.setOrientation(LinearLayout.HORIZONTAL);
 for(int i=0;i<items.length();i++){
      hsv.addView(new CustomExpandView(item));
 }

The CustomExpandView would be used for your cells and could be something like this...

public class CustomExpandView extends RelativeLayout implements OnClickListener {

MyActivity mActivity = null;
ImageView ivImage, ivOverImage;
RelativeLayout rlView;

public CustomExpandView(Context context) {
    super(context);
    initialize();
}

public CustomExpandView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initialize();
}

public void initialize() {
    mActivity = (MyActivity) this.getContext();
    LayoutInflater inflater = (LayoutInflater) mActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.custom_cell_expand, this, true);

            //you can initialize subviews here
    rlView = (RelativeLayout) getChildAt(0);
    ivImage = (ImageView) rlView.getChildAt(0);
    ivOverImage = (ImageView) rlView.getChildAt(1);

 rlView.setOnFocusChangeListener(new OnFocusChangeListener(){

        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            LinearLayout expand = v.findViewById(R.id.view_i_want_to_expand);
            if(hasFocus)
                expand.setVisibility(View.VISIBLE);
            else
                expand.setVisibility(View.GONE);
        }

    });
}