How to make custom ListView like attached image

Question

I'm working with RSS Feed. I use ListView with Adapter to display data in custom view containing "LinearLayout with Image and Text". This view is repeated in each row. But, I need to make custom view like the image below to display data with different view.

Answer 1

Steps:

1. The tabbar can be done with horizontal scrollview with buttons inside. on button click change that button width and height. and reset last selected one.

2. the colored horziontal line can be another linear layout. you change its color on button click.

3. you can have to different layouts in the same listview. one for two items and one for one.

4. in adapter getCount method you should calculate the number of rows you have. beased on the algorithm used to decide which rows can have one item and which rows can have two.

That listview is not that complicated as you may think.

Working Example:

I created a github repository for it.

Adapter Class:

public class ArticlesAdapter extends ArrayAdapter<Article> {

    int mod;

    public ArticlesAdapter(Context context, int resource, ArrayList<Article> teams) {
        super(context, resource, teams);
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {

        int resource = R.layout.single_item;
        if (position % 2 == 0)
            resource = R.layout.double_item;
        if (position == getCount()-1 && mod == 1)
            resource = R.layout.single_item;

        if (view == null || view.getTag() != resource)
        {
            LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = vi.inflate(resource, null);
            view.setTag(resource);
        }

        TextView tv1 = (TextView)view.findViewById(R.id.textView1);
        ImageView iv1 = (ImageView)view.findViewById(R.id.imageView1);

        int index1 = (position * 3 / 2) + (position * 3) % 2;
        Article article1 = getItem(index1);

        tv1.setText(article1.getDesc());
        iv1.setImageResource(article1.getImageUrl());

        if (resource == R.layout.double_item)
        {
            TextView tv2 = (TextView)view.findViewById(R.id.textView2);
            ImageView iv2 = (ImageView)view.findViewById(R.id.imageView2);

            int index2 = index1 + 1;
            Article article2 = getItem(index2);

            tv2.setText(article2.getDesc());
            iv2.setImageResource(article2.getImageUrl());
        }

        return view;
    }

    @Override
    public int getCount() {
        int count = super.getCount();
        mod = count % 3;
        count = count / 3 * 2;
        return count + (mod > 0 ? 1 : 0);
    }
}

Main Activity Layout:

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

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="@dimen/tabbar_height"
        android:background="@android:color/black"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="bottom"
            android:baselineAligned="false">

            <Button
                android:id="@+id/button1"
                android:layout_width="@dimen/button_width"
                android:layout_height="match_parent"
                android:background="@color/red"
                android:text="@string/top_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="0"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button2"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/orange"
                android:text="@string/entertain_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="1"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button3"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/green"
                android:text="@string/world_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="2"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button4"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/blue"
                android:text="@string/biz_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="3"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button5"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/purple"
                android:text="@string/sport_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="4"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button6"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/pink"
                android:text="@string/games_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="5"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button7"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/yellow"
                android:text="@string/tech_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="6"
                android:onClick="tabClicked"/>

        </LinearLayout>

    </HorizontalScrollView>

    <LinearLayout
        android:id="@+id/tabbarLineLL"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:background="@color/red"
        android:orientation="vertical">

    </LinearLayout>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp">

    </ListView>

</LinearLayout>

Tab Clicked Method:

public void tabClicked(View view)
{
    LinearLayout.LayoutParams tempLL;

    // reset current selected button size
    Button currentButton = tabs[selected_index];
    tempLL = (LinearLayout.LayoutParams)currentButton.getLayoutParams();
    tempLL.width = (int) getResources().getDimension(R.dimen.button_width);
    tempLL.height = (int) getResources().getDimension(R.dimen.button_height);
    currentButton.setLayoutParams(tempLL);

    // change selected tab
    selected_index = Integer.parseInt(view.getTag().toString());

    // change color for the new selected button
    tempLL = (LinearLayout.LayoutParams)view.getLayoutParams();
    tempLL.width = (int) getResources().getDimension(R.dimen.button_width);
    tempLL.height = (int) getResources().getDimension(R.dimen.tabbar_height);
    view.setLayoutParams(tempLL);

    // change tabbar line color
    ColorDrawable buttonColor = (ColorDrawable) view.getBackground();
    tabbarLineLL.setBackgroundColor(buttonColor.getColor());

    setupAdapter();
}

public void setupAdapter()
{
    // setup adapter for selected tab
    articlesAdapter = new ArticlesAdapter(this, 0, articles.get(selected_index));
    listview.setAdapter(articlesAdapter);
    articlesAdapter.notifyDataSetChanged();
}