CODEWITHSUNDEEP
androiduser-interfacelandscapetablelayout
Ben Siver
Ben Siver

Reputation: 2948

Android UI: Multiple Horizontally Paged Table

I am trying to implement a UI that contains a data table (populated dynamically) displayed using a TableLayout. I would like 4 columns of the table to be displayed by default, with the ability to horizontally scroll the table to reveal 4 (or more) additional columns. Is this possible using a TableLayout combined with a horizontal/vertical ScrollView? I would appreciate any example XML exhibiting this style.

Here is an example to clarify:

Default table view enter image description here

View after scrolling to right enter image description here

Upvotes: 1

Views: 1100

Answers (3)

Ben Siver
Ben Siver

Reputation: 2948

The way I went about solving this was by using a ViewFlipper. I am rather surprised no one had mentioned this before.

I changed my XML around to look like this:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/hsv1"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content">
        <ViewFlipper android:id="@+id/dataTableFlipper"
                 android:layout_width="fill_parent" android:layout_height="fill_parent">

                <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                            android:layout_width="fill_parent" 
                            android:layout_height="wrap_content"
                            android:id="@+id/dataTable"
                            android:stretchColumns="*">
                </TableLayout>
                <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                            android:layout_width="fill_parent" 
                            android:layout_height="wrap_content"
                            android:id="@+id/dataTable2"
                            android:stretchColumns="*">
                </TableLayout>
        </ViewFlipper>
</ScrollView>

This way I could manage each page of the table as separate TableLayouts.

Declaring the ViewFlipperprogrammatically allowed me to use ViewFlipper.showNext() to alternate between the two tables. Works like a charm!

Upvotes: 0

Steve Bergamini
Steve Bergamini

Reputation: 14600

You should be able to achieve this by placing your TableLayout inside a HorizontalScrollView. Define the width of your elements inside your TableLayout

Something like this (i did not test this):

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/hsv1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <TableLayout android:layout_height="wrap_content" 
           android:gravity="center" 
           android:layout_width="wrap_content"  
           android:id="@+id/tl1" 
           android:scrollbars="horizontal">

        // Your other elements go here.

    </TableLayout>
</HorizontalScrollView>

Upvotes: 1

sathishpaul
sathishpaul

Reputation: 122

I am not sure if this directly solves your problem, but do take a look at android-viewflow on github. https://github.com/pakerfeldt/android-viewflow

Upvotes: 0

Related Questions