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);
        }

    });
}

Answer 2

You gave the answer yourself. You can use a ViewPager, with fragments, and have an animation to extend the lower part of the window. Depends on whether you want the windows to be full screen or not. A viewpager doesn't necessarily need fragments, you can use ordinary views, and an appropriate adapter. Just play with it and see which solution you like most.

Next time, just create the code and the app, and ask a much more specific question, with code to illustrate the issue you're experiencing.

Answer 3

You could simply define a TableView with just one TableRow (or as many as you need) and set a onClickListener for each of those Views inside the TableRow, which would make that on any click, the selected View would expand itself.

I don't know whether you'll have a static number of Views inside that row or you'll construct them dynamically, but this should work for any of them, the real "work" here about populating that row.

Once you have your row of Views, simply declare an onClickListener() on each of them. For example, this should be enough:

OnClickListener myListener = new OnClickListener() {
  @Override
  public void onClick(final View v) {
    v.setVisibility(View.VISIBLE);
  }
};

And as the onClick event for all of your items inside the TableRow:

for (View v : myTableRowViews) v.setOnClickListener(myListener);

This has a disadvantage: You can know which View has been clicked for selection, but natively you cannot know which has been deselected, so you'll need to keep track of the last selected tab declaring a class-wide variable and setting it each time onClick() is fired, so your listener will become something like this:

// In your class declare a variable like this
View lastSelected = null;

OnClickListener myListener = new OnClickListener() {
  @Override
  public void onClick(final View v) {
    if (lastSelected != null)
      lastSelected.setVisibility(View.GONE);

    v.setVisibility(View.VISIBLE);

    lastSelected = v;
  }
};

Additionally, you can set an animation to the effect to make it more attractive, but mainly this is the idea.

One last thing: To make it work this way you'll need to set the layout_height of both your TableRow and the View items inside, so it may expand afterwards when you set the additional part as visible. Also, to make it look good all of your Views will have to be the same height (both in the reduced and extended state).