Thursday, 9 September 2010

Android tabbed, horizontally and and vertically scrollable tablelayouts

The following layout XML will allow you to create an application layout similar to the following, where the data under the tabs can be scrolled both horizontally and vertically by a finger swipe.


To see the horizontal scrollbar, you'll have to scroll to the bottom of the screen.

The XML file is after the jump:



 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout   
   xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"   
   android:layout_height="fill_parent"  
   android:id="@+id/main_root">  
   <LinearLayout   
     android:id="@+id/main_top_bit"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_alignParentTop="true">  
     <TableLayout   
       android:id="@+id/main_table_device_info"  
       style="@style/DefaultTableLayoutStyle">  
       <TableRow   
         style="@style/TopResultDataRow">  
         <TextView   
           android:id="@+id/main_tv_root_status"  
           android:text="@string/label_root_status" />  
         <TextView   
           style="@style/TopResultTextView"   
           android:id="@+id/viewRootStatus"  
           android:layout_span="2" />  
       </TableRow>  
       <TableRow   
         style="@style/TopResultDataRow">  
         <TextView   
           android:id="@+id/main_Time"   
           android:text="@string/label_time" />  
         <TextView   
           style="@style/TopResultTextView"   
           android:id="@+id/viewTime"  
           android:layout_span="2" />  
       </TableRow>  
     </TableLayout>  
   </LinearLayout>  
   <TabHost   
     xmlns:android="http://schemas.android.com/apk/res/android"  
     android:id="@android:id/tabhost"   
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent"   
     android:layout_below="@+id/main_top_bit">  
     <LinearLayout   
       android:orientation="vertical"  
       android:layout_width="fill_parent"   
       android:layout_height="fill_parent">  
       <TabWidget   
         android:id="@android:id/tabs"  
         android:layout_width="fill_parent"   
         android:layout_height="wrap_content" />  
       <FrameLayout   
         android:id="@android:id/tabcontent"  
         android:layout_width="fill_parent"   
         android:layout_height="fill_parent">  
         <ScrollView   
           android:id="@+id/main_scrollview_ipconfig_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_ipconfig_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
         <ScrollView   
           android:id="@+id/main_scrollview_ip_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_ip_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
         <ScrollView   
           android:id="@+id/main_scrollview_route_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_route_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
         <ScrollView   
           android:id="@+id/main_scrollview_netstat_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_netstat_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
         <ScrollView   
           android:id="@+id/main_scrollview_ps_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_ps_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
         <ScrollView   
           android:id="@+id/main_scrollview_other_info"  
           android:layout_width="fill_parent"   
           android:layout_height="fill_parent"  
           android:fillViewport="true">  
           <HorizontalScrollView   
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"   
             android:fillViewport="true">  
             <TableLayout   
               android:id="@+id/main_table_other_info"  
               style="@style/DefaultTableLayoutStyle">  
             </TableLayout>  
           </HorizontalScrollView>  
         </ScrollView>  
       </FrameLayout>  
     </LinearLayout>  
   </TabHost>  
 </RelativeLayout>   
(This was formatted using the Source Code Formatter : http://codeformatter.blogspot.com/2009/06/about-code-formatter.html)

2 comments:

  1. can you provide full demo of this, because alot of things are missing

    ReplyDelete
  2. Plz provide full code

    ReplyDelete