Horizontal ScrollView in List View Item Android

Question

I have a list view with 20 rows and I want to setup a horizontal scrollview for every row item in list view, as each row contains more than one item.

Here is my code :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <HorizontalScrollView
        android:id="@+id/hor_scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/mainLinear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </HorizontalScrollView>

</RelativeLayout>

Inner Row Layout which is to be replicated in a row any number of times

<ImageView
    android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_marginRight="6.0dip"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:gravity="center_vertical"
    android:text="Example Value"
    android:textAppearance="?android:textAppearanceMedium" />

BaseAdapter

public class HorizontalListViewAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<ArrayList<DwivediJi>> dataSet;


    public HorizontalListViewAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return 20;
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.horizontal_list_item, null,false);

        LinearLayout mainLinnerLayout=(LinearLayout)convertView.findViewById(R.id.mainLinear);

         for (int i = 0; i <5; i++) {
             View additionView = inflater.inflate(R.layout.inner_layout_file, null,false);
             LinearLayout innerLinnerLayout=(LinearLayout)additionView.findViewById(R.id.inner_layout);
             mainLinnerLayout.addView(innerLinnerLayout);
        } 
        return convertView;
    }

    class ViewHolder {
        TextView tv_titleExample;
        HorizontalScrollView hzView;
        LinearLayout linear_layout,main_linear_layout;
    }
}

My Problem

Look at the screenshot attached. My problem is that more than one view is showing at one time in each row.

I want that only one view should show to the user at one time and for the rest all the user has to do is swipe left to right or right to left.

Answer 1

Use scrollview in xml layout and then dynamically create HorizontalScrollView inside for loop:

example :

for(int i.......) //number of HorizontalScrollView needed
{
    HorizontalScrollView mainlinear = new HorizontalScrollView(
                getApplicationContext()); 
    for(int i.......) //number of items wants to add in  HorizontalScrollView 

    {
        // adding any widgets as per your requirements
    }
    mainlinear.addView(Widgetname);
    scroll.addView(mainlinear);
}

Answer 2

Note: Not an ideal solution, but should provide what you want.. Another Note: This may make your listview slightly janky, depending on the layout-complexity

@Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.horizontal_list_item, null,false);

        LinearLayout mainLinnerLayout=(LinearLayout)convertView.findViewById(R.id.mainLinear);

         for (int i = 0; i <5; i++) {
             View additionView = inflater.inflate(R.layout.inner_layout_file, null,false);
             LinearLayout innerLinnerLayout=(LinearLayout)additionView.findViewById(R.id.inner_layout);

             // If the width varies for each innerLinnerLayout, then remove the if block & always calculate padding value
             // padding is an integer initialized to -1 in the constructor
             if (padding == -1) {
                 int width = context.getResources().getDisplayMetrics().widthPixels;
                 innerLinnerLayout.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
                 padding = width - additionView.getMeasuredWidth();
             }
             // I've set padding to right only, but you could center it by giving left and right padding of value=(padding/2)
             innerLinnerLayout.setPadding(0, 0, padding, 0);
             mainLinnerLayout.addView(innerLinnerLayout);
        } 
        return convertView;
    }

Answer 3

The problem is with your adapter as:

1. getCount() from your adapter must return the total number from list. Returning 20 is not valid in your context - and you seem to have 20 items in your list. You should return dataSet.size();
   
2. getItem() should return the item from the model data structure, in this case:

Below

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return dataSet.get(position);
}

Also, your getView method must return the view that displays the model data at given at position parameter. Returning a ViewGroup with non-meaningfull dummy data is what you currently have. You should get the ArrayList<DwivediJi> from parameter position (through dataSet.get(position)) and construct/inflate a View that displays properly this data structure item.

Answer 4

Change inner layout width to match_parent. This should help you

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginRight="6.0dip"
        android:src="@drawable/ic_launcher" />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:text="Example Value"
        android:textAppearance="?android:textAppearanceMedium" />
</LinearLayout>

Seems you are adding your inner layout in this LinearLayout

<LinearLayout
        android:id="@+id/mainLinear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    </LinearLayout>

Did you try changing its width to match_parent too??