Friday 14 February 2014

Scroll multiple TableLayout Horizontally and Vertically in android



This will allow you to scroll a table layout vertically and each table layout can be scrolled horizontally

First Picture : Scroll Layout containing four table layout

Second Picture : Single table layout scrolled horizontally to right.





Third Picture : Layout scrolled vertically down

Fourth Picture : Single table layout scrolled horizontally toLeft.





OverView:

<ScrollView>
  <LinearLayout>

    <TextView> // Heading 1
<HorizontalScrollView>
  <TableLayout>
    <TableRow>
      <TextView>
    </TableRow>
  </TableLayout>
</HorizontalScrollView>


  <TextView> // Heading 2
<HorizontalScrollView>
  <TableLayout>
    <TableRow>
      <TextView>
    </TableRow>
  </TableLayout>
</HorizontalScrollView>


  </LinearLayout>
</ScrollView>

Layout file :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

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

<TextView
android:id="@+id/head1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="@string/head1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TableLayout
android:id="@+id/tablelayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TableRow
android:id="@+id/Tablerow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>

<TableRow
android:id="@+id/Tablerow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</HorizontalScrollView>

<TextView
android:id="@+id/head2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="@string/head2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TableLayout
android:id="@+id/tablelayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TableRow
android:id="@+id/Tablerow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>

<TableRow
android:id="@+id/Tablerow4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</HorizontalScrollView>

<TextView
android:id="@+id/head3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="@string/head3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TableLayout
android:id="@+id/tablelayout5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TableRow
android:id="@+id/Tablerow5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView28"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView29"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>

<TableRow
android:id="@+id/Tablerow6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView34"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView35"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</HorizontalScrollView>

<TextView
android:id="@+id/head4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="@string/head4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TableLayout
android:id="@+id/tablelayout6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TableRow
android:id="@+id/Tablerow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView37"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView38"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView39"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView42"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>

<TableRow
android:id="@+id/Tablerow8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column2"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column3"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView46"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column4"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView47"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column5"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView48"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="@string/Column6"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</HorizontalScrollView>
</LinearLayout>

</ScrollView>

No comments:

Post a Comment