(The pulse news app has a somewhat similar idea, like we had to build)
The problem Profico encountered was worse than only making horizontal ListView, We had to make each of the items vertically scrollable. In the end we succeeded to solve the entire concept by using Horizontal Scroll View lib we found on the web, by using our brains, and some luck 🙂 The client this is build for is one of our regional telecom operators, and the usage is to display mass informations, so views reusability optimization had to be considered with much caution;
Actually two years ago I encountered a somewhat similar problem of having to make each item in one ListView to be horizontally scrollable. That one was solved by overriding the Androids default Gallery plugin inside each list item. If you want to learn more about that solution, leave a comment or contact me whatsoever and I can send you the code snippet or make another post.
What is the best Android Horizontal ListView lib?
Of course we didn’t know the answer to this question, so we decided to google around and found quite a few of them. The only one we found to be really good and mostly completed was by Lucas Rocha. Lucas thanks, and here is a link to his lib: TwoWay Lib.
Using this HorizontalListView lib is actually easy. You download the lib, add is as a library project in Eclipse (add project from existing sources, right click on the project -> use as Library Project), and then add it as a Library for your project in its project properties.
Add it to your layout file via XML:
Scroll the items vertically
Now all you have to are the standard ListView operations. Make an adapter that extends BaseAdapter and attach it to the above Horizontal Scroll View. To be able to scroll each horizontal item vertically, we simply inflated a ScrollView containing a LinearLayout to each item.
What we inflate to the list items:
...
...
In the end, Profico had a cool new widget, and our client was thrilled to have the app made exactly as the designers wanted!
So this would be our way of implementing a horizontal listview with vertically scrollable items. It is based on existing libs in both the open community and some android widgets. Problems we were afraid to encounter was the swipe handling by the android, and everything is actually working just fine on almost any device. Some of them have problems with exact event processing, but we solved that problem too. Ask in comments if you would like to know how!
31 thoughts on “Android horizontal listview library with item scroll”
Leave a Reply
You must be logged in to post a comment.
Hi,
I have the same problem of trying to put a horizontal scrolling view inside a listview item. I would be very keen to know how you solved that problem.
So far I have tried making a list view, with a scrollview as the item, this worked fairly well, but was pretty slow when as each scroll view had to draw all of the items.
The second approach was a list view which contained a HorizontalListView as its item. This was quick for the initial draw as it would only inflate the visible items, but the scrolling was very slow.
Any advice on how to achieve best results would be very much appreciated!
Hi Jonathan,
In our approach we are having a reverse situation with having the Horizontal list view as the parent, with scroll view items.
You are having the vertical scroller as the parent. Actually we’ve been there too, and solved it with using androids gallery plugin as the item layout, but your items are then pinned to the middle (we needed that feature anyway).
Are you reusing your views in the proper way? If you are, you can make one step further and do the parent-child reusing of adapters! Paste the getView() method here and I can look into if your approach works! The HorizontalListView inside the ListView should work if set up properly!
Best regards
Ante
nice lib!
Hi,
thank you so very much for the valuable info found in this website. I am trying to get a grasp of utilizing the TwoWayView lib along with a TitlePageIndicator to get both the horizontal/vertical capability along with sliding in-between fragments for the title.
Sadly I haven’t been able to combine both (not even sure if this is possible) since both libraries need to reside in the main.xml. Every time I try to adjust I end up showing 1 of the two capabilities but not both.
Is there any way to achieve this?
Thanks in advance for any help.
Regards..
Luis
Hi Luis,
I’m not sure if I understood your question completely but it looks like you’re trying use TwoWayView inside Android’s ViewPager (by means of switching it with Jake Wharton’s ViewPagerIndicator)? If that’s the case there is really a huge amount of problems you’ll have to solve to make it work. Considering standard UX practices and UI guidelines you shouldn’t do stuff like this because it uses same interaction/gesture for two completely different actions. Swiping would make list horizontally scroll and pager change current page? This kind of ambiguity should be avoided whenever possible. However if you still need both things you could distinct them by introducing bezel swipe for changing pages but that would essentially mean massive refactoring of ViewPager class and I’m personally not really sure is it good and intuitive solution…
To answer your question directly it is technically possible and you could make it work avoiding xml problem but you’ll have to solve huge pile of other problems/clashes of two’s coexistence that originate from fact that both classes rely extensively on same touch handlers. I suggest you to try to change your approach and if you can’t best advice would be to start digging around OnTouch and OnInterceptTouch methods of both classes (TwoWayView and ViewPager).
If you have additional questions, feel free to ask 😉
Best regards,
Dario
Hi,
I have implemented horizontal listview inside the vertical listview through your lib.But i need to integrate pull to refresh for both vertical and horizontal listview.In that i have successfully implemented pull to refresh for Vertical listview.Can u guide me as how to integrate it in horizontal listview?
the Horizontal mode is broken on Kitkat(api-19)
Does it allow to have header/footer views
This tutorial is very good.. i am looking for the same from last three days, will u send me the code to implement it
Spot on with this write-up, I absolutely believe this amazing site needs far more attention.
I’ll probably be back again to read through more, thanks for the
advice!
Hello,
We have a very similar ui where we have a horizontal scrollview inside a listview. But I have to implement a swipe to refresh kind of feature, where if a user swipes from left to right (when first item is visible) a new item appears which says ‘call person’. The biggest issue is how to show as if this new item is coming out of screen when user starts to swipe and when swipe is long enough, this new item stays there. Could someone please help me with this issue.
Thanks, Sunny
hi,
i have tried to implement two eay lib. but when i run my app in eclipse IDE, logcat says that error inflating the xml file , and it points the declaration statement “org.lucasr.twowayview.TwoWayView” , i couldnt understand the problem , because IDE correctly recognizes the lib, and it is correctly imported in my project, my app is reffering it correctly. but in the end all went in vain due to this error.
Thanks.
Regards,
Ahsan Ejaz
Hi I am trying to use this lib, but when I import the lib, console throws errors saying unable to find attribute android:layoutDirection and this is the same for paddingEnd, paddingStart, requiresFadingEdge, textAlignment and textDirection. Plus the R.java throws Syntax error, insert “}” to complete ClassBody R.java /main/gen/org/lucasr/twowayview line 568 Java Problem, this might be due to the previous error pointed out by console.
“parent-child reusing of adapters” – Can you explain what you mean?
I need to have a normal listview with items that can scroll horizontal. my listview items layout looks like this:
and in its adapter getView method I have this code:
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ViewHolder viewHolder;
if (convertView == null)
{
// inflate the layout
convertView = mInflater.inflate(R.layout.adapteritem, parent, false);
// well set up the ViewHolder
viewHolder = new ViewHolder();
viewHolder.textViewHeader = (TextView) convertView.findViewById(R.id.headerTextView);
viewHolder.textViewHeaderBtn = (TextView) convertView.findViewById(R.id.headerButton);
viewHolder.header = convertView.findViewById(R.id.header);
viewHolder.listView = (HListView) convertView.findViewById(android.R.id.list);
// store the holder with the view.
convertView.setTag(viewHolder);
} else
{
viewHolder = (ViewHolder) convertView.getTag();
}
Type type = getItem(position);
if(type.isBanner())
{
viewHolder.header.setVisibility(View.GONE);
}
else
{
viewHolder.header.setVisibility(View.VISIBLE);
}
BaseAdapter adapter = getAdapter(getContext(), mPicasso, type);
viewHolder.listView.setAdapter(adapter);
viewHolder.textViewHeader.setText(type.header);
viewHolder.textViewHeaderBtn.setText(type.btnName);
return convertView;
}
This becomes very laggy – any solutions? (getAdapter creates an adapter based on the Type object
@Kasper”I need to have a normal listview with items that can scroll horizontal. my listview items layout looks like this:”
If you don’t need vertical scrolling inside an item, why would you event touch the adapter from the getView method?? Just use the default implementation of the Two-way-lib
I want a ListView that scrolls vertically, but each row in the ListView most contain a ListView that scrolls horizontal. I can make this functionality, but it performs very bad. The Netflix app has this functionality (they have a ListView with rows that contains ViewPagers and it performs good) .
Performances depend on the number of views inside the lists, and on how good the cell reusing has been done. Make sure to cache all the views in between scrolling, and change contents only!
Hi, thanks for a short but informative read. Could you please make a tutorial on how to use this library for pictures. For example, on your picture you have three horizontal slides with pictures. I want to make something like that. So far i am only getting it two work with strings (whit the help of https://guides.codepath.com/android/Implementing-a-Horizontal-ListView-Guide#overview), because i dont know how to make an appropriate adapter.
I always use a simple adapter for my ListView, but get the following error when trying it on a twowayview.
“java.lang.IllegalStateException: org.lucasr.twowayview.TwoWayView is not a view that can be bounds by this SimpleAdapter”
Hi Oskar,
Well for the photos you could simply include a image view within your own layout.
The caching part should be handled separately!
Hi Ante, can you do a short example on how a listview can be done with the caching. More interested in the caching part. Thanks.
Hi.
I have below questions regarding your implementation.
1. How you had made two-way view to work as a horizontal listview?
2. How you set adapters to two-way view since we should have one adapter for horizontal scrolling items in one row and one adapter for vertical items?
Can you please elaborate more on this?
I want to add footer and access it in my activity in onScrollListener(). I tried to do this as:
footerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.list_footer_view, null, false);
twoWayView.addView(footerView);
But it gives me error.
thanks @Ante Dagelić
i want to know that how can i scroll this list by clicking on some button for example next and back to show the next item
This tutorial is very good.. i am looking for the same from last one week, will u send me the code to implement it.
Please send me the code sir Ante Dagelić /….
where can i download lib can u suggest me a link?
hi..the image of one list item gets displayed for other list items when we scroll listview vertically in android..how to solve this problem?
hi, thanks for your useful materials, please send me the code of the Androids default Gallery plugin inside each list item
hi
I want to create a horizontal picker like below image:
https://www.dropbox.com/s/8hni925p9oorokd/Screen%20Shot%202015-10-31%20at%201.50.23%20PM.png?dl=0
I tried 3 days but i could not style to middle Item ( custom width and custom color )
Plz help me to create this horizontal picker with custom style or email me your codes!
any help is helpful 🙂
tnx
please send me the code @Mr.Antie Dagelic
hello , I am using view pager inside listview but viewpager view does n’t show ,can you suggest me what is better approach? i am using same concept like “facebook recommend post” ,which is scrolling horizontal.
@my short of code
void setupView(int position) {
this.position=position;
subParentLinearLayout.setVisibility(View.VISIBLE);
if(position>0) {
subParentLinearLayout.setVisibility(View.GONE);
userPostLayout.setVisibility(View.VISIBLE);
if(position==1) {
recLinearLayout.setVisibility(View.VISIBLE);
leftToRightAdapter = new LeftToRightAdapter(mainActivity.getSupportFragmentManager());
viewPagerRecommd.setAdapter(leftToRightAdapter);
}
/*else
recLinearLayout.setVisibility(View.GONE);*/
}else{
userPostLayout.setVisibility(View.GONE);
}
—
—
—
}