Add view between 2 rows Gridview

Question

I have a GridView, with 3 elements per row, and when I click on an item, a new view comes below the row. It\'s a bit like a folder application on iOS. I didn\'t find any ans

Answer 1

Although obviously there's no native component to accomplish what you want to do here, there's several ways to get the effect you want by combining other methods.

One way i can think of is by creating your own Adapter and add the functionality to insert 3 more elements below the row clicked tagged with some kind of enum so you can differentiate it from the regular view, of course at the getView method of the Adapter, you will have to do the validation to know which view to inflate and return, after refreshing the view those 3 elements will be inserted below the clicked element and of course you can get rid of them by modifying the list the adapter is displaying. (This approach requires quite good knowledge of custom adapters, i've done something like this and is a clean and good approach).

Another approach to this issue which is not as good as the first one however would absolutely do the trick is by, creating kind of a "Template" of the Effect that you want to get (like the one in the picture you have), keep that template as part of the activity on top of your grid view invisible, once someone taps on a element, fill the template accordingly to the info you want to show, make the grid invisible and bring the "template" visible on top of the grid, with the info that you want to show properly filled, the user wouldn't notice the change and when you want to go back to the grid view, just remove this "template" view and it will do the effect of having the grid the way it originally was.

Hope this helps.

Regards!

Answer 2

You can do this easily with GridLayout but not with GridView.

To find out the available width of the grid before you place your items and set the number of columns, either set a ViewTreeObserver.OnGlobalLayoutListener (which can then place your items) or extend GridLayout and override onMeasure (int widthMeasureSpec, int heightMeasureSpec).

Insert a row after every row of content and set it's visibility to Visibility.GONE and it's columnSpec to the number of columns of your GridLayout. When the user taps an item, you can get it's info, populate the view under it and expand or animate it's visibility toggling.

Finally, for the indicator, I would just add it as a child of the hidden row and, when a user taps the item, calculate the horizontal center of said item and exactly place this view's center on the X axis to that coordinate (margins would be OK for this).

Please note that for very large lists of items this is not recommended as you'll have to instantiate every item to display immediately, regardless if they all fit on the screen or not. Unlike GridView, GridLayout is not a child of AbsListView.

Answer 3

I use TableLayout.addView to add an ImageView, it might need another variable to removeView, currently I just remove it and add another one when button been click.

I change the imageView by their position which you can base on that to change the background so the user will assume it related to the one they click

ImageView imag; 
boolean imageOn = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imag = new ImageView(this); 
    final TableLayout table = (TableLayout) findViewById( R.id.tableLayoutCategoryButtons );
    int buttonsInRow = 3;
    String[] itemNames = getResources().getStringArray(R.array.categories_array);

    int numRows=(itemNames.length/buttonsInRow);
    if (itemNames.length%buttonsInRow!=0)
        numRows++;

    Button[] buttons = new Button[itemNames.length];
    LinearLayout[] tablerowLayout = new LinearLayout[numRows];
    tablerowLayout[0] = new LinearLayout(table.getContext());
    int rowcount=0;
    for (int i=0; i<itemNames.length; i++){
        buttons[i]= new Button(table.getContext(), null, android.R.attr.buttonStyleSmall);
        buttons[i].setText(itemNames[i]);
        buttons[i].setId(i);
        buttons[i].setTextColor(Color.BLACK);
        buttons[i].setVisibility(View.VISIBLE);
        buttons[i].setOnClickListener(new OnClickListener(){

            @Override
            public void onClick(View v) {
                if(imageOn){
                    table.removeView(imag);
                    imageOn = false;
                }
                int index = v.getId()/buttonsInRow+1;
                if(v.getId()%buttonsInRow==1)
                    imag.setImageResource(R.drawable.reta);
                else if(v.getId()%buttonsInRow==2)
                    imag.setImageResource(R.drawable.reta2);
                else
                    imag.setImageResource(R.drawable.reta3);

                imageOn = true;
                table.addView(imag, index);

            }});

        LinearLayout.LayoutParams buttonLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        tablerowLayout[rowcount].addView(buttons[i], buttonLayoutParams);

        if (((i+1)%buttonsInRow==0)&&(i!=0)){

            table.addView(tablerowLayout[rowcount++]);
            if(rowcount<numRows)
                tablerowLayout[rowcount] = new LinearLayout(table.getContext());
        }
    }
    if(rowcount<numRows)
        table.addView(tablerowLayout[rowcount]);