How do I call 2 consecutive items in a list in a table form next to each other?

Question

Basically I have a list view containing news headlines such that the first headline covers the top portion, the alternate headline the second portion and third headline third portion and the second and the third are consecutive in the list( the first remains as the only headline in the list ). I have programmatically defined it as follows:

public class NewsListAdapter extends UselessAdapter {

    private static final int NUM_TYPES = 3;
    LayoutInflater mInflater;

    private static final class Types {
        public static final int FIRST_HEADLINE = 0;
        public static final int OTHER_HEADLINE = 1;
        public static final int ALTERNATE_HEADLINE = 2;
    }

    public NewsListAdapter(final Context context, final int layout,
            final String[] from, final int[] to) {
        super(context, layout, from, to);
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getItemViewType(final int position) {
        if (position == 0) {
            return Types.FIRST_HEADLINE;
        }
        if (position %2 == 0 && position!= 0) {
            return Types.ALTERNATE_HEADLINE;
        } else {
            return Types.OTHER_HEADLINE;
        }
    }

    @Override
    public int getViewTypeCount() {
        return NUM_TYPES;
    }

    @Override
    public View getView(final int position, View convertView, final ViewGroup parent) {
        if (!mDataValid) {
            throw new IllegalStateException("this should only be called when the cursor is valid");
        }

        if (!mCursor.moveToPosition(position)) {
            throw new IllegalStateException("couldn't move cursor to position " + position);
        }

        final int type = getItemViewType(position);

        if(convertView == null) {
            convertView = newView(type, parent);
        }
        if (position % 2 == 0){
            convertView.setBackgroundResource(R.drawable.oddcellcolor);
        } else {
            convertView.setBackgroundResource(R.drawable.evencellcolor);
        }
        bindView(convertView, mContext, mCursor);
        return convertView;
    }

    private View newView(final int type, final ViewGroup parent) {
        View view;
        switch (type) {
        case Types.FIRST_HEADLINE:
            view = mInflater.inflate(R.layout.item_news_first_headline, parent, false);
            break;
        case Types.ALTERNATE_HEADLINE:
            view = mInflater.inflate(R.layout.item_news_alternate_headline, parent, false);
            break;
        default:
            view = mInflater.inflate(R.layout.item_news_headline, parent, false);
            break;
        }

        return view;
    }
}

Now, I have item_news_alternate_headline and item_news_headline codes the same in 2 different xml files respectively:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:foo="http://schemas.android.com/apk/res/com.justin.jar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/news_headline_padding" >


    <com.justin.jar.utils.FontTextView
        android:id="@+id/news_headline_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="3"
        android:paddingLeft="@dimen/common_left_padding"
        android:paddingRight="5dp"
        android:textSize="@dimen/news_first_headline_text" 
        foo:customFont="cabin.medium.ttf"
        android:textColor="@color/search_autosuggest_header_text"
        android:layout_toLeftOf="@id/news_headline_image" />

    <com.justin.jar.utils.FontTextView
        android:id="@+id/metadata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/search_autosuggest_item_subtitle"
        android:textSize="@dimen/metadata" 
        android:paddingLeft="@dimen/common_left_padding"
        android:paddingRight="5dp"
        android:layout_alignLeft="@id/news_headline_text"
        android:layout_toLeftOf="@id/news_headline_image"
        android:layout_below="@id/news_headline_text" 
        />
</RelativeLayout>

Now when I call run my project I get the following output:

which I now want to change to:

Each cell is selectable, so need to make it such that for the second and the third headline placed next to each other(without altering the first headline) each is individually selectable. How do I go about creating a layout and altering my current java code for the same (Please note: I would like ot change the code just for tablets and not for phone, so it'll be awesome if anyone can suggest a way in which editing the xml layout will be enough so I can create layouts for tablets separately without affecting phone code). Thanks!

Answer 1

What this essentially boils down to is finding a compromise between:

1. A ListView (where you're stuck with individual rows) or GridView (where there are a fixed number of non-spannable columns), or
2. A fixed layout in the form of a TableLayout or a GridLayout.

Clearly, the first options won't suffice out of the box, because you want some rows with one column and others with two. You may find a compromise in writing your own implementation of a ListView, but this will be extremely tedious and most likely overkill for your application.

I'm aware of a custom component that allows for staggered columns (StaggeredGridView), but you'd instead need column spanning. Perhaps there's another open source custom component out there somewhere that gets this done.

The second option--writing a fixed layout in a TableLayout or a GridLayout--probably won't suit your needs either as the length of your list is dynamic, layouting would be slow, and loading images into the placeholders will consume a considerable amount of memory.

I would instead suggest using a ListView and writing a custom list adapter that inflates different layouts. Those layouts should include ViewGroups that handle the click event instead of having that done through the ListView's own OnItemClickListener. Perhaps you could have two layouts:

• One headline layout, that is essentially one layout that spans the entire width;
• One multi-item layout, that displays two news items next to one another with equal weights.

This does mean that you'll need to provide a custom background with selector states and handle the OnClickListener of the individual ViewGroups yourself, but it also allows you to make good use of layouts in for different screen sizes. By using <include> you can consider, for instance, displaying three news items next to each other for res/layout-land or res/layout-w720dp. Perhaps in the case of three columns you could even mix things up a little with a two-column span for articles with image, and single columns for articles without.

Answer 2

Yes you can use the gridView for this one. here is the example codes

just check link1 and link2

Answer 3

Use grid view. make it auto fit fellow same approach get getItemViewType return large item for first. and rest small. I think this should work, never tried this.

or refer http://sudarnimalan.blogspot.sg/2012/06/android-bigger-image-for-first-item-of.html similar to your problem.