Gridview not displaying correctly as Listview title

Question

I want to achieve Fig-1 , but I was stuck with Fig-2 and could not see the full gridview as a Listview header.

As you can see, gridview is not fully displayed and is hidden behind the 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

Hi guys, I got my answer using Gridview as the title of the list.

I just calculated the height of the separator for the Gridview using the method below 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 by:

Finally, the Exact Answer:

For an even number of views:

 params.height = height/2 + 20; 

For an odd number of views:

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

Where:

• I used 5 as a number to compare bcoz after this adapter value. Count the change in space between the gridview and listview increases with fixed values.

• For spaces up to 5, the else part is processed.

• itemHeight is an incremental value with which space is increased

• 20 is a space field between gridview and list

• (count x 5) - this is the value for managing margin as the elements increase.

bcoz this gave me double the space for the height of the Gridview above the Listview for an even number of views

and gridview + half height space for an odd number of views

Hope this helps :)

Answer 2

Try this method by taking your grid and list in a single layout and using android:weightSum to distinguish so that it is applicable on 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 view of the grid to be displayed completely first and below, it should be a list, and when scrolling, the gridview should go up, and the list should follow it, as shown in Fig. 1

Reserve this Awesome-MaterialDesign library with a simple explanation. As shown below in picture

Answer 3

When you want to inflate a GridLayout , also link to your View list. Something like that:

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

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

Answer 4

try adding android:layout_marginTop="some_value" to the RelativeLayout ListView