One common challenge on Android that often arises is the need to create a horizontal ListView that works like a regular ListView but scrolls horizontally instead. This is common for news, images, etc.
Unfortunately, there is no "canonical" officially supported solution for this. Instead all we have is a series of half-baked unfinished libraries. This can make developing Horizontal ListView more challenging than you would initially suspect.
This guide is a step-by-step walkthrough of implementing a Horizontal ListView using the available third-party libraries.
Of all the third-party libraries currently out there for Horizontal ListView, the most complete and useable is called TwoWayView. Even though there is a warning about this not being production ready, this is still probably the best view short of implementing one yourself.
Download TwoWayView as a ZIP and then install it as a library project. Note: If you have any trouble importing the version downloaded, try this modified version compatible with Eclipse.
First, let's add a style indicating the orientation of the ListView (horizontal or vertical) in res/values/styles.xml:
<style name="TwoWayView">
<item name="android:orientation">horizontal</item>
</style>In your Layout XML, use the following code to add the TwoWayView:
<org.lucasr.twowayview.TwoWayView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/lvItems"
style="@style/TwoWayView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"
tools:context=".MainActivity" />Now we can populate data into the TwoWayView much like any ListView as described in the Adapter guide. For example, we might create a very simple array of items:
ArrayList<String> items = new ArrayList<String>();
items.add("Item 1");
items.add("Item 2");
items.add("Item 3");
items.add("Item 4");
// ...and then construct a super simple ArrayAdapter and populate the TwoWayView with:
Take into account that the layout_width param is defined as match_parent in simple_list_item_1, so if you use it, the list will show just the first element. So, please create a new layout like this:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical" />ArrayAdapter<String> aItems = new ArrayAdapter<String>(this, R.layout.simple_list_item_1, items);
TwoWayView lvTest = (TwoWayView) findViewById(R.id.lvItems);
lvTest.setAdapter(aItems);
Here we have implemented a simple Horizontal ListView using a popular third-party library. Obviously this example is very simple but you can follow the steps in the the Adapter guide to create arbitrarily complex list items.
