How can I make my layout scroll both horizontally and vertically?

I am using a TableLayout. I need to have both horizontal and vertical scrolling for this layout. By default I am able to get vertical scrolling in the view but horizontal scrolling is not working.

I am using Android SDK 1.5 r3. I have already tried android:scrollbars="horizontal".

I have read on some forums that in the cupcake update, horizontal scrolling is possible.

How can I make my layout scroll in both directions?

126427 次浏览

I was able to find a simple way to achieve both scrolling behaviors.

Here is the xml for it:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:scrollbars="vertical">


<HorizontalScrollView
android:layout_width="320px" android:layout_height="fill_parent">


<TableLayout
android:id="@+id/linlay" android:layout_width="320px"
android:layout_height="fill_parent" android:stretchColumns="1"
android:background="#000000"/>


</HorizontalScrollView>


</ScrollView>

In this post Scrollview vertical and horizontal in android they talk about a possible solution, quoting:

Matt Clark has built a custom view based on the Android source, and it seems to work perfectly: http://blog.gorges.us/2010/06/android-two-dimensional-scrollview

Beware that the class in that page has a bug calculating the view's horizonal width. A fix by Manuel Hilty is in the comments:

Solution: Replace the statement on line 808 by the following:

final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(lp.leftMargin + lp.rightMargin, MeasureSpec.UNSPECIFIED);

Use this:

android:scrollbarAlwaysDrawHorizontalTrack="true"

Example:

<Gallery android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawHorizontalTrack="true" />

its too late but i hope your issue will be solve quickly with this code. nothing to do more just put your code in below scrollview.

<HorizontalScrollView
android:id="@+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="match_parent">


<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
//xml code
</ScrollView>
</HorizontalScrollView>

Since other solutions are old and either poorly-working or not working at all, I've modified NestedScrollView, which is stable, modern and it has all you expect from a scroll view. Except for horizontal scrolling.

Here's the repo: https://github.com/ultimate-deej/TwoWayNestedScrollView

I've made no changes, no "improvements" to the original NestedScrollView except for what was absolutely necessary. The code is based on androidx.core:core:1.3.0, which is the latest stable version at the time of writing.

All of the following works:

  • Lift on scroll (since it's basically a NestedScrollView)
  • Edge effects in both dimensions
  • Fill viewport in both dimensions

You can do this by using below code

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
                            

</LinearLayout>
</ScrollView>
</HorizontalScrollView>

This implementation can always display both horizontal and vertical scrollbars

activity_main.xml

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- vertical scroll view -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fadeScrollbars="false"
android:scrollbarSize="@dimen/scroll_bar_size">


<!-- horizontal scroll view hidden scroll bar -->
<HorizontalScrollView
android:id="@+id/real_horizontal_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">


<!-- content view -->
<EditText
android:id="@+id/real_inside_view"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</HorizontalScrollView>
</ScrollView>


<!-- fake horizontal scroll bar -->
<HorizontalScrollView
android:id="@+id/fake_horizontal_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:fadeScrollbars="false"
android:scrollbarSize="@dimen/scroll_bar_size">


<!-- fake content view that has width equals the real content view -->
<View
android:id="@+id/fake_inside_view"
android:layout_width="wrap_content"
android:layout_height="@dimen/scroll_bar_size" />
</HorizontalScrollView>
</RelativeLayout>

MainActivity.java

    final EditText realInsideView = findViewById(R.id.real_inside_view);
final HorizontalScrollView realHorizontalSv = findViewById(R.id.real_horizontal_scroll_view);


final View fakeInsideView = findViewById(R.id.fake_inside_view);
final HorizontalScrollView fakeHorizontalSv = findViewById(R.id.fake_horizontal_scroll_view);


realHorizontalSv.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
fakeInsideView.setMinimumWidth(realInsideView.getWidth());
fakeHorizontalSv.setScrollX(scrollX);
}
});