GridView inside Expandable list in android

Question

I want to put an gridview with images inside an expandable list...I've already make that, but the gridview don't show all item...

How can i make my expandable list child adapt to the gridview size?

LIST ADAPTER

public class CustomListAdapter extends BaseExpandableListAdapter
{
    String[]            catg    = { "Administração, Escritorio e Industria", "Cultura e Entretenimento", "Educação e Crianças", "Eventos e Estado do tempo", "Amigos, Familia e Habitações", "Multimédia", "Diversos", "Números e Letras", "Restaurantes e Hoteis", "Desporto, Saude e Beleza", "Lojas", "Turismo e Natureza", "Transportes" };

    Context             myctx;


    @Override
    public Object getChild(int groupPosition, int childPosition)
    {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition)
    {
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent)
    {
        ViewGroup item = getViewGroupChild(convertView, parent);
        GridView label = (GridView) item.findViewById(ipvc.estg.placebook.R.id.gridview);
        label.setAdapter(new GridAdapter(parent.getContext(), groupPosition+1));
        return item;
    }

    private ViewGroup getViewGroupChild(View convertView, ViewGroup parent)
    {
        // The parent will be our ListView from the ListActivity
        if (convertView instanceof ViewGroup)
        {
            return (ViewGroup) convertView;
        }
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);
        ViewGroup item = (ViewGroup) inflater.inflate(ipvc.estg.placebook.R.layout.expandable_list_row, null);
        return item;
    }

    @Override
    public int getChildrenCount(int groupPosition)
    {
        return 1;
    }

    @Override
    public Object getGroup(int groupPosition)
    {
        return catg[groupPosition];
    }

    @Override
    public int getGroupCount()
    {
        return catg.length;
    }

    @Override
    public long getGroupId(int groupPosition)
    {
        return groupPosition;
    }



    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent)
    {
        View item = getViewGroupGroup(convertView, parent);

        TextView text = (TextView) item.findViewById(android.R.id.text1);
        text.setText(catg[groupPosition]);
        return item;
    }

    private View getViewGroupGroup(View convertView, ViewGroup parent)
    {
        // The parent will be our ListView from the ListActivity
        if (convertView instanceof View)
        {
            return (View) convertView;
        }
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);
        View item1 = (View) inflater.inflate(android.R.layout.simple_expandable_list_item_1, null);

        return item1;
    }

    @Override
    public boolean hasStableIds()
    {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition)
    {
        // TODO Auto-generated method stub
        return true;
    }

}

LIST ROW LAYOUT

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <GridView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="50dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center" />
</LinearLayout>

Solution 1

I've done tons of searches my own for solving this situation, but didn't find anything so far, so i've made a workaround.

This workaround assumes that you know / can retrieve the width of your columns, and the height of your grid cell renderers (the dp size set in your layout xmls).

You should insert a few more lines inside your ExpandableListAdapter's getChildView method:

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent)
{
    ViewGroup item = getViewGroupChild(convertView, parent);
    GridView label = (GridView) item.findViewById(ipvc.estg.placebook.R.id.gridview);
    label.setAdapter(new GridAdapter(parent.getContext(), groupPosition+1));

    // initialize the following variables (i've done it based on your layout
    // note: rowHeightDp is based on my grid_cell.xml, that is the height i've
    //    assigned to the items in the grid.
    final int spacingDp = 10;
    final int colWidthDp = 50;
    final int rowHeightDp = 20;

    // convert the dp values to pixels
    final float COL_WIDTH = getBaseContext().getResources().getDisplayMetrics().density * colWidthDp;
    final float ROW_HEIGHT = getBaseContext().getResources().getDisplayMetrics().density * rowHeightDp;
    final float SPACING = getBaseContext().getResources().getDisplayMetrics().density * spacingDp;

    // calculate the column and row counts based on your display
    final int colCount = (int)Math.floor((parentView.getWidth() - (2 * SPACING)) / (COL_WIDTH + SPACING));
    final int rowCount = (int)Math.ceil((intValues.size() + 0d) / colCount);

    // calculate the height for the current grid
    final int GRID_HEIGHT = Math.round(rowCount * (ROW_HEIGHT + SPACING));

    // set the height of the current grid
    label.getLayoutParams().height = GRID_HEIGHT;

    return item;
}

With the addition above i was able to produce the following displayed layouts:

and

I hope it can help you as well.

Solution 2

all you need to do is change the GrideView with ExpandableHeightGridView

and configure XML with

android:isScrollContainer="false"

and in code

expandableHeightGridView.setExpanded(true);

Solution 3

how about using a Gallery instead of GridView? check this out!

Solution 4

Try this github full source code of expendable list view with gridview

https://github.com/coolwd10/ExpandablelistwithGirdview

View more solutions

Comments

[rekaszeru]

You're welcome, happy coding further! ;) also +1 for the orig. question, let's hope others will find it useful as well

[AnujAroshA]

@rekaszeru can you please tell me what the parentView and intValues stands for ? Thanks in advance

[rekaszeru]

@Anuja Piyadigama: parentView is a view (optionally containing the grid), who's width can be determined, and matches the width of the grid. If you have fixed grid width, you can use it there. The intValues is a list of integers that are fed into the grid. Based on the number of these integers, and knowing the column count you are able to calculate how many rows are necessary. Hope this clears up things a bit.

[AnujAroshA]

@rekaszeru thanks for the reply. I am having the ExpandableListView in LinearLayout in one XML file and the GridView is inside another LinearLayout in another XML file. So do I need to get the LinearLayout as my parentView or is that a single Grid are you talking about? I'm feeding the Grid content from a seperate JSON where it can be increase. So how can I count the intValues Thank you

[rekaszeru]

@Anuja Piyadigama, you see if the parent parameter does work for you or not (as I understand, it refers to the LinearLayout you are looking for, so instead of using parentView you could use the parent parameter's width); as of the intValues, it does not matter that the length of this list changes, with a proper BaseAdapter extension for the ExpandableListView you can call on it notifyDatasetChanged() whenever it is necessary, so you just feel free to count the items in the JSON list, and calculate with it.

[Ankit]

Hey can you please add code for new GridAdapter(parent.getContext(), groupPosition+1). Please don't mind but i am trying to execute expandable list with each row containing 3 columns max but failed. So if you can show me how you executing above functionality just by adding GridAdapter code then i can check and modify according to my requirement. Thanks in advance!

[Maarten]

Note that the Gallery was deprecated starting API level 16 (Jelly Bean).

[MGR]

Can we work with the GridView as in this, majgowrishankar.blogspot.in/2013/03/… ???

[lazy lord]

@rekaszeru is this gridview scrollable?

[rekaszeru]

@lazylord no, it was meant to expand to its full height.

[lazy lord]

@rekaszeru so how to make it scrollable for supporting pagination

[53iScott]

Your solution works. I think this is the easiest to solve this problem. Thanks

[Atul Dhanuka]

@rekaszeru just i want to ask i have created my gridview in xml can i use that one

[Atul Dhanuka]

@rekaszeru if u have any sample code is working fine can u provide me and in gridview in need two textview

[rekaszeru]

@AtulDhanuka You should create your own adapter (extend BaseAdapter for instance), and use your layout with two textviews from that. Sorry, but I don't have any sample layout code at my hand now.

[Sharath]

Hey can you guide me how to do Expandable list with grid items?