bolex5
bolex5

Reputation: 45

Android GridView scrollable in two dimensions

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.

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

Upvotes: 3

Views: 793

Answers (1)

A. Petrizza
A. Petrizza

Reputation: 3350

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.

Upvotes: 1

Related Questions