Gridview not showing properly as a header of Listview

Question

I want to achieve Fig-1 but I am stuck with Fig-2 and not able to see full gridview as a header of Listview.

As you can see the gridview is not showing fully and hiding behind Listview in Fig-2

Gridview xml :

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<GridView
    android:id="@+id/gridview"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:cacheColorHint="#ffffffff"
    android:gravity="center"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</RelativeLayout>

Listview xml :

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >

<ListView
    android:id="@+id/listview"
    android:scrollbars="vertical"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</ListView>

</RelativeLayout>

Fragment code :

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


    view=inflater.inflate(R.layout.fragmentpage_layout, null);

    listView=(ListView)view.findViewById(R.id.listview);

    header=inflater.inflate(R.layout.gridview_layout,null);

    gridView=(GridView)header.findViewById(R.id.gridview);
    listView.addHeaderView(header);
    gridViewAdapter=new CustomGridViewAdapter(getActivity(),images,toptexts, bottomtexts);
    listViewAdapter=new CustomListViewAdapter(getActivity(),images,toptexts,bottomtexts);

    gridView.setAdapter(gridViewAdapter);

    listView.setAdapter(listViewAdapter);


   return view;
}

Thanks In Advance.

Answer 1

Hey Guys I got my Answer using Gridview as a Header of Listview.

I just Calculated the Divider Height for Gridview using below method and it worked perfectly as I wanted.

   public static void setDynamicHeightGridView(GridView mListView,String oddeven) {
        ListAdapter mListAdapter = mListView.getAdapter();
        if (mListAdapter == null) {
            return;
        }
        int height = 0;
        int desiredWidth = View.MeasureSpec.makeMeasureSpec(mListView.getWidth(), View.MeasureSpec.UNSPECIFIED);


        for(int i = 0; i < mListAdapter.getCount(); i++){
            View listItem = mListAdapter.getView(i, null, mListView);
            listItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
            height += listItem.getMeasuredHeight();
            itemHeight=listItem.getMeasuredHeight()/3;
        }

        ViewGroup.LayoutParams params = mListView.getLayoutParams();

        if(oddeven.equals("odd")){
            if(mListAdapter.getCount()>=5){
                int count=((mListAdapter.getCount()-5)/2) + 1;
                params.height = ((height - (height / 3)) - (itemHeight * count)) + 20 + (count * 5);

            }else{
                params.height = height - (height / 3) + 20;
            }

        }else if(oddeven.equals("even")) {
            params.height = height/2 + 20;
        }


        mListView.setLayoutParams(params);
        mListView.requestLayout();
    }

Edited :

Finally the Exact Answer :

For Even number of views set :

params.height = height/2 + 20;

For Odd number of Views set :

params.height = ((height - (height / 3)) - (itemHeight * count)) + 20 + (count * 5);

where :

• I have used 5 as the number for comparision bcoz after this value of Adapters Count the variation in the space between gridview and listview is increasing with fixed values.

• For the space before 5 is handled in the else part.

• itemHeight is the incremental value with which the space is increasing

• 20 is the margin space between gridview and listview

• (count x 5) is the value for managing the margin as the elements increases.

bcoz it was giving me double the space for Gridview height above Listview for Even number of views

and Gridview + half it's height space for Odd number of views

Hope It Helps :)

Answer 2

Try this way , Taking your Grid and List in single layout and using android:weightSum to differentiate so that it will be applicable in all devices ,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="3dp"
    android:weightSum="2">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:cacheColorHint="#ffffffff"
        android:gravity="center"
        android:numColumns="2"
        android:stretchMode="columnWidth" />

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#fff"
        android:scrollbars="vertical" />

</LinearLayout>

---

Fragment code :

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    view=inflater.inflate(R.layout.fragmentpage_layout, null);

    listView=(ListView)view.findViewById(R.id.listview);
    gridView=(GridView)header.findViewById(R.id.gridview);

    //your code

    gridView.setAdapter(gridViewAdapter);
    listView.setAdapter(listViewAdapter);


   return view;

}

OR

If you want the whole gridview to be displayed fully first and below it should be the listview and when you scroll the gridview should go upwards and the listview should follow it behind as in Fig-1

Checkout this Awesome-MaterialDesign library with simple explaination.As shown in below figure

Answer 3

When you want to inflate your GridLayout also reference your listView With something like this :

header = LayoutInflater.from(getActivity()).inflate(R.layout.your_header, mListView, false);

And one more things : pass your relativeLayout instead of your GrideLayout as header.

Answer 4

try adding android:layout_marginTop="some_value" in the RelativeLayout of the ListView