Create Horizontal ListView using GridView

A ListView is a list of views arranged vertically. You can scroll the items only in vertical direction.A GridView is a two dimensional array of views which can be scrolled only in horizontal direction and number of rows is fixed. Apart from these two GroupView, no other API exists till now in Android which you can directly use to create a Horizontal scrollable List View. Here HorizontalScrollView comes in rescue. In this article, we will use Horizontal scroll view and grid view along-with  LinearLayout to create a Horizontal scroll view. You will have to do the following steps.

But We want something like this...

To get this we have to do some homework steps to get desired view

1. Declare a layout element like below one in one of you activity or fragment layout XML file.

2. Get the GridView reference in your java activity class.

3. Set gridView’s number of column as size of your list items

1. Declaration of HorizontalScrollView

<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:padding="1dp"    android:orientation="vertical">    <HorizontalScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scrollbars="none"        android:id="@+id/title_horizontalScrollView"        android:layout_margin="1dp"        android:fillViewport="false">        <LinearLayout            android:orientation="horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            >            <GridView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:id="@+id/horizontal_gridView"                android:layout_gravity="center"                />        </LinearLayout>    </HorizontalScrollView>   </LinearLayout>

2. Get the GridView Reference inside your onCreate method.

import ……. public class HorizontalListViewExample extends Activity {     private GridView horizontalGridView;     …    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);             horizontalGridView = (GridView)findViewById(R.id.horizontal_gridView);            } }

3. Set GridView number of column as list size

public class HorizontalListViewExample extends Activity {     private GridView horizontalGridView;     List<String> list;     int size;          …    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);             horizontalGridView = (GridView)findViewById(R.id.horizontal_gridView);        list= new ArrayList<String>();        size=list.size()        gridview.setNumColumns(size);    } }

Apart from the above basic setting, you can also set the GridView resolution independent item width and total width of GridView element so that all items inside the GridView will be occupied inside single row.

private void gridViewSetting(GridView gridview) {        int size=list.size();        // Calculated single Item Layout Width for each grid element ....        int width = …… ;                DisplayMetrics dm = new DisplayMetrics();        this.getWindowManager().getDefaultDisplay().getMetrics(dm);        float density = dm.density;        int totalWidth = (int) (width * size * density);        int singleItemWidth = (int) (width * density);        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                allWidth, LinearLayout.LayoutParams.MATCH_PARENT);        gridview.setLayoutParams(params);        gridview.setColumnWidth(itemWidth);        gridview.setHorizontalSpacing(2);        gridview.setStretchMode(GridView.STRETCH_SPACING);        gridview.setNumColumns(size);    }