-
Notifications
You must be signed in to change notification settings - Fork 6.4k
Implementing a Horizontal ListView Guide
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" />
Name it as simple_list_item_1 and use the following code to test it:
ArrayAdapter<String> aItems = new ArrayAdapter<String>(this, R.layout.simple_list_item_1, items);
TwoWayView lvTest = (TwoWayView) findViewById(R.id.lvItems);
lvTest.setAdapter(aItems);
The view will now present the items horizontally like:
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.
- http://profi.co/android-horizontal-list-view-library-with-item-scroll/
- http://lucasr.org/2013/02/21/introducing-twowayview/
- https://github.com/lucasr/twoway-view
- https://github.com/MeetMe/Android-HorizontalListView
- https://github.com/dinocore1/DevsmartLib-Android
- https://github.com/twotoasters/HorizontalImageScroller-Android
- https://developer.android.com/preview/material/ui-widgets.html
Created by CodePath with much help from the community. Contributed content licensed under cc-wiki with attribution required. You are free to remix and reuse, as long as you attribute and use a similar license.
Finding these guides helpful?
We need help from the broader community to improve these guides, add new topics and keep the topics up-to-date. See our contribution guidelines here and our topic issues list for great ways to help out.
Check these same guides through our standalone viewer for a better browsing experience and an improved search. Follow us on twitter @codepath for access to more useful Android development resources.