Android GridView scrollable in two dimensions

Question

I want to make a game with a board composed of buttons without spacing between them and the board must be scrollable in 2 dimensions in the same time. When I was trying to make nested containers, then I could scroll, for example verticaly but horizontal is then locked.

How can I do scrollable board?
How to completely remove spacing between buttons?

I believe the solution below should work for you. Let me know! — A. Petrizza, Jun 28 '17 at 15:29
This still doesn't work. I can draw vertically or horizontally, but not at the same time in any direction. I want effect like zooming an image and moving it. And how can I resize AppCompatButton to square shape? — bolex5, Jun 29 '17 at 08:57
Updated answer, I didnt realize that you wanted something to just move around freely. See if the updated answer gets your desired behavior. — A. Petrizza, Jun 29 '17 at 15:34
I finally can create GridView and Buttons with desired look, but when I'm trying to add custom scroll views, then I can see only last button in row. I tried to extend ScrollView and GridView, but doesn't work. How can I combine this? https://ibb.co/cNr405 — bolex5, Jun 30 '17 at 16:23
Sorry about missing your comments, are you still having issues? — A. Petrizza, Jul 05 '17 at 14:39
No, I haven't. I used scroll vertical and horizontal with TableLayout and it works fine. Still don't know how to do this on GridView. — bolex5, Jul 05 '17 at 16:47
Honestly I couldnt find resources for that answer either! I am glad this works for you though :) — A. Petrizza, Jul 10 '17 at 12:49

A. Petrizza · Accepted Answer · 2017-06-29T15:32:55.057

To achieve both scrolling behaviors you can implement this XML below:

Now this is using a scroll view as the parent layout to have scrolling in both directions.

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

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="320px" android:layout_height="fill_parent">

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linlay" android:layout_width="320px"
        android:layout_height="fill_parent" android:stretchColumns="1"
        android:background="#000000"/>

</HorizontalScrollView>

Then to enable the horizontal scrollbar use this:

android:scrollbarAlwaysDrawHorizontalTrack="true"

As for the no spacing on the buttons, you can easily achieve this by making sure they have no padding or margins to their neighbors what so ever.

Just size them how you like, to make sure they fit across the screen in the desired design.

To use a Gridview you can do something like this:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/schemeGridView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:numColumns="1" >
    </GridView>
</LinearLayout>

</HorizontalScrollView>

To solve the issue of diagonal scrolling. I believe you need to work on the actual touch event to initiate scroll.

Try this:

@Override
    public boolean onTouchEvent(MotionEvent event) {
        float curX, curY;

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                mx = event.getX();
                my = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                mx = curX;
                my = curY;
                break;
            case MotionEvent.ACTION_UP:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                break;
        }

        return true;
    }

Found here for reference: Diagonal scrolling

Let me know if this works.

Android GridView scrollable in two dimensions

1 Answers1