Add a view between two rows of a gridview

Question

I have a GridView with 3 elements in a row, and when I click on an element, a new view appears below the row. This is a bit like a folder app on iOS. I did not find an answer on SO or on Google. Maybe you can give me some advice.

Answer 1

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

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

Insert a row after each row of content and set its visibility to Visibility.GONE , and columnSpec to the number of columns in your GridLayout . When a user deletes an item, you can get its information, fill out the view below it and expand or change its visibility.

Finally, for the indicator, I simply add it as a child of the hidden row, and when the user closes the element, calculate the horizontal center of the specified element and precisely place this center of view along the X axis at this coordinate (the fields for this would be okay).

Please note that this is not recommended for very large lists of elements, since you will need to instantiate each element for immediate display, regardless of whether they all fit on the screen or not. Unlike GridView , GridLayout not a child of AbsListView .

Answer 2

Although obviously there is no component of its own to accomplish what you want to do here, there are several ways to get the desired effect by combining other methods.

One of the ways that I can think of is to create my own adapter and add functionality to insert three more elements below the line with a click marked by some renaming, so that you can distinguish it from the normal view, of course, using the getView method adapter, you will need to do validation to find out what kind of inflate and return, after updating the view, these three elements will be inserted under the click of the element, and, of course, you can get rid of them by changing the list in which the adapter is located. display. (This approach requires a good enough knowledge of custom adapters, I did something like this and is a clean and good approach).

Another approach to this problem, which is not as good as the first one, however, will absolutely help by creating the "Template" of the Effect you want to receive (for example, the one in your picture), save this template as part of the activity on top of your view the grid is invisible, as soon as someone clicks on the element, fill out the template with the information you want to show, make the grid invisible and bring the “template” on top of the grid, with the information you want to show correctly filled in, the user will not notice the change, and when you zah You want to go back to the grid view, just delete this "template" view, and it will affect the network, as it was originally.

Hope this helps.

Hello!

Answer 3

I am using TableLayout.addView to add an ImageView, it may need another variable to remove the View, for now I just delete it and add another button when the button is clicked.

I am changing the imageView according to their position, which you can use to change the background so that the user assumes that it is associated with the one they click on

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