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.
