My Current Implementation
I have a HorizontalScrollView
which I create in XML that houses a few LinearLayout
children. I have added this code below.
There are two LinearLayout
containers with the id's group_one
and group_two
and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView
at run time depending on the amount of View
objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView
without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView
) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="@+id/map_plugin_scroll_view"
android:background="@color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="@+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="@+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="@+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.
NestedScrollView is just like ScrollView , but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
In the ScrollView, we can scroll the components in both direction vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout
with the ID group_container
. However for some reason the HorizontalScrollView
was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one
and group_two
LinearLayouts
. Now the HorizontalScrollView
respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="@+id/map_plugin_scroll_view"
android:background="@color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="@+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="@+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="@+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With