Different Column number for each rows in GridView android

Question

I have to create UI using the Gridview. The image are dynamic since it is coming from the webservice .

I can define column number using the xml but the item at the zeroth index has to have one full image and then the rest should be divided into columns .

Any Help is appreciated.

Jinajingle

Answer 1

I solved it by using ListView .Added a view to listView Header. Then inside the child for the list view I added two view .In the getView method of the custom adapter I incremented the position by one everytime.

P.S: If you want to implement the above view using endless adapter you will have to find a better solution.

Jinajingle

Answer 2

You shoud use a TableLayout. GridView does not support spanning operations.

A layout that arranges its children into rows and columns. A TableLayout consists of a number of TableRow objects, each defining a row (actually, you can have other children, which will be explained below). TableLayout containers do not display border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can hold one View object. The table has as many columns as the row with the most cells. A table can leave cells empty. Cells can span columns, as they can in HTML.

You can see an example here.

Powerboat

Thats true but i need i have dynamic data that is coming so even if i draw the view each time will not solve the problem instead create a new problem altogether for me.I guess i'll landup facing outofmemory issue – Jinajingle

Answer 3

Based on Jack K Fouani. Some changes that will save entire image from cropping:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

   <!-- Large Image   -->
    <ImageView
         android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true" />
    <!-- //Large Image -->

    <!-- Small Images -->
    <GridView 
      android:id="@+id/list"
      android:numColumns="auto_fit"
      android:columnWidth="120dip"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="0dip" >
   </GridView>
    <!-- Small Images -->

</LinearLayout>

A fast solution, others have a lot of work, try it. you may like it.

GridView gv = findViewById(R.id.list);
        gv.setOnScrollListener(new AbsListView.OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onScroll(AbsListView arg0, int firstVisibleItem, int arg2, int arg3) {
                // TODO Auto-generated method stub
                ImageView iView = findViewById(R.id.image);
                if (firstVisibleItem == 0)
                {
                    iView.setVisibility(View.VISIBLE);
                }
                else
                {
                    iView.setVisibility(View.Gone);
                }
            }
        });

Madaras

I guess i have already thought about this but this is not the solution .Because when i'll try to scroll only the grid will scroll but i need the whole view to scroll along – Jinajingle

you didn't mention this in your question anyway. provide your xml layout. – Madaras

Sorry my bad .I have landed up figuring it out. What u have pasted above is the same i have done till now. – Jinajingle

@Terril I am trying to do the same thing. What solution did you use? Thanks – Burglar

@JessicaM: I used a listview and moified my adapter as per my requirement. Just added a list header and added an ImageView . – Jinajingle

Answer 4

you can use GrideView weight=1 and above of it add ImageView

for example if you want to use GrideView this is full example Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

   <!-- Large Image   -->
    <ImageView
         android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dip"
        android:layout_gravity="center_horizontal"
        android:scaleType="centerCrop" />
    <!-- //Large Image -->

    <!-- Small Images -->
    <GridView 
      android:id="@+id/list"
      android:numColumns="auto_fit"
      android:columnWidth="120dip"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="0dip" >
   </GridView>
    <!-- Small Images -->

</LinearLayout>

this layout will be exactly the same of your request

Raimondo

I guess i have already thought about this but this is not the solution .Because when i'll try to scroll on the grid will scroll but i need the whole view to scroll along – Jinajingle

then you need to change w/h of first element inside GrideView , you can call Display to get current w/h of user device then set width=display.w and height= 50% of display height – Raimondo

Even if i do that how can i then handle the rest of the Views .I guess u mean to say using Display metric i can get the Width of the each device then for position at zero i'll add it to gridview.But what about the number column that i have already added. – Jinajingle

use static h/w for the rest of columns but for position=0 use costume h/w just like u said – Raimondo

thats not possible @Jack – Jinajingle