Horizontal ListView – The UGLY Hack!

Android have ListView and GridView to show list of similar data in an efficient way. But, there’s a big limitation in them, i.e. you cannot use these in horizontal scrolling mode. You may find various libraries on Internet for making a Horizontal ListView but let me present a Hack that will let you make Horizontally Scrollable ListView in very easy and convenient way.

What you need is HorizontalScrollView, LinearLayout and GridView that’s all.

activity_main.xml

<RelativeLayout 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"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name" />

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true" >
<GridView
android:id="@+id/list_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="@dimen/horizontal_spacing" />
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>

 MainActivity.java

private GridView mListFilter = null;
	private FilterAdapter mAdapterFilter = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initializeFilterList();

	}

	private void initializeFilterList() {
		mListFilter = (GridView) findViewById(R.id.list_filter);
		mAdapterFilter = new FilterAdapter((Context) this);

		/*
		 * Here we will set the column count of GridView as the total elements so that there is only one row
		 * and this much columns. HardCode the width of GridView as the
		 * "count of columns * width of each column" so that GridView can take that much width with-in its
		 * parent HorizontalScrollView.
		 */
		int filterCount = mAdapterFilter.getCount();
		int width = (int) (filterCount * getResources().getDimension(R.dimen.width_filter_icon));
		LayoutParams params = new LayoutParams(width, LayoutParams.WRAP_CONTENT);
		mListFilter.setLayoutParams(params);
		mListFilter.setNumColumns(filterCount);

		mListFilter.setAdapter(mAdapterFilter);
		mListFilter.setOnItemClickListener(this);
	}

That’s all this is the hack which lets you make a Horizontal Scrollable ListView. For a working example you can download the Source Code or the APK, from here.

NOTE :-
• Limitation of this hack is that you need to have a hard-coded width for list items.
• You need ActionBarCompat library in order to compile the Source Code.

 

Written By: Ankit Bansal, Android Developer, Mindfire Solutions

Advertisements

One thought on “Horizontal ListView – The UGLY Hack!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s