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

Question

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?

Darton

Answer 1

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>

Darton

Horizontal scrolling is going good... but there are no visible horizontal scroll bars.. how can we do that..? – Evaporimeter

warning: this may be a bad practice. See this question/answer: #4491321 – Coniology

@PedroLoureiro actually, the question in the link you posted refers to combining ScrollView with ListView. This is because ListView has a ton of optimizations in it that do not play nicely with a surrounding ScorollView. The answer posted here is not using ListView, so the linked argument is irrelevant. – Avery

Any alternative for sticky columns and rows? Scrolling is not smooth with sticky views – Lipps

I thought this was a good idea, but it actually doesn't allow diagonal scroll - you can only scroll one axis at a time.. which is kind of bad – Pilot

Diagonal scrolling does not work this way – Definitive

To show both vertical and horizontal scrollbars, you can use this way https://mcmap.net/q/36507/-how-can-i-make-my-layout-scroll-both-horizontally-and-vertically – Arcane

Answer 2

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>

Madge

Answer 3

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);

Willdon

Answer 4

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

Tena

Answer 5

Use this:

android:scrollbarAlwaysDrawHorizontalTrack="true"

Example:

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

Gorlin

Answer 6

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>

Opossum

Answer 7

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);
        }
    });

Arcane

Answer 8

Had the same problem (SDK 34), but with AppBarLayout no solution i found works. Finally, this solution works with my large Tablelayout and AppBarLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"   
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
            
        // use Table- or other Layout here with:    
        // android:layout_width="wrap_content"
        // android:layout_height="wrap_content"         
    </HorizontalScrollView>
</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Shanley