Showing posts with label Horizontal scrollview. Show all posts
Showing posts with label Horizontal scrollview. Show all posts

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>
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)