ListView Scrollbars insideOverlay no effect

1.5k Views Asked by At

I have a ListView inside a HorizontalScrollView, the scrollbartrack takes up a area to the right. When I change to Scrollbarstyle:insideOverlay it doesn't it still takes up the are. If I change to scrollbars:none the area disappears so I know it has something to do with the scrollbars.

I have tested with all styles on scrollbars and played around with padding and margin haven't found any way to get it to actually overlay. It seems to be the HorizontalScrollView that creates the problem if I remove that the scrollbars are overlayed correctly.

In this code I set the overlay both in xml and code but none of them seems to work.

Here is a basic working example where the problem shows up. In my real code the layout is not just green so a solution with coloring the track green wont work.

public class ScrollTest extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scroll_test);
        ListView lv= getListView();

        lv.setDivider(null);

        //Just to make sure!
        lv.setScrollBarStyle(ListView.SCROLLBARS_INSIDE_OVERLAY);

        // create the grid item mapping
        String[] from = new String[] {"rowid", "col_1", "col_2", "col_3", "col_4", "col_5"};
        int[] to = new int[] { R.id.item1, R.id.item2, R.id.item3, R.id.item4, R.id.item5 , R.id.item6};

        // prepare the list of all records
        List<HashMap<String, String>> fillMaps = new ArrayList<HashMap<String, String>>();
        for(int i = 0; i < 50; i++){
            HashMap<String, String> map = new HashMap<String, String>();
            map.put("rowid", "" + i);
            map.put("col_1", "col_1_item_" + i);
            map.put("col_2", "col_2_item_" + i);
            map.put("col_3", "col_3_item_" + i);
            map.put("col_4", "col_4_item_" + i);
            map.put("col_5", "col_5_item_" + i);
            fillMaps.add(map);
        }

        // fill in the grid_item layout
        SimpleAdapter adapter = new SimpleAdapter(this, fillMaps, R.layout.row, from, to);
        lv.setAdapter(adapter);
    }
}

And the relevant xml for the layout. activty_scroll_test.xml:

<?xml version="1.0" encoding="UTF-8"?>
    <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="fill_parent">
            <ListView
            android:id="@android:id/list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbarStyle="insideOverlay"/>
    </HorizontalScrollView>

row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="@android:color/holo_green_dark"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <TextView android:id="@+id/item1"
            android:text="row_id"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="40dip"
            android:padding="5dp"
        />
        <TextView android:id="@+id/item2"
            android:text="col_1"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="100dip"
            android:padding="5dp"
        />
        <TextView android:id="@+id/item3"
            android:text="col_2"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="100dip"
            android:padding="5dp"
        />
        <TextView android:id="@+id/item4"
            android:text="col_3"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="100dip"
            android:padding="5dp"
        />
        <TextView android:id="@+id/item5"
            android:text="col_4"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="100dip"
            android:padding="5dp"
        />
        <TextView android:id="@+id/item6"
            android:text="col_5"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:width="100dip"
            android:padding="5dp"
        />
</LinearLayout>
1

There are 1 best solutions below

3
On

From android:scrollbarStyle (admittedly not the best documentation in Android):

When inset, they add to the padding of the view. [..] If you want them to appear at the edge of the view, ignoring the padding, then you can use outsideOverlay or outsideInset.

So, setting it to insideOverlay, with no padding on the ListView and no margins on the list items, you would get a scrollbar on top of the list items.

You can use Hierarchy Viewer to figure out where the spacing is coming from. It's likely padding or margins on the list items, namely that 5dp on @+id/item6.