Monday, May 13, 2013

Table Layout In Android

Table Layout

Table Layout organizes content into rows and columns. The rows are defined in the layout XML, and the columns are determined automatically by Android. This is done by creating at least one column for each element. So, for example, if you had a row with two elements and a row with five elements then you would have a layout with two rows and five columns.

You can specify that an element should occupy more than one column using android:layout_span. This can increase the total column count as well, so if we have a row with two elements and each element has android:layout_span=”3? then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the column an element should occupy using android:layout_column.





More Layout Tutorial In Android
Relative Layout In Android                                                            
Table Layout                                                                         
Frame Layout(With Example)                                                    
Absolute Layout                                                                             
Grid Layout    
To learn Basic of Android Animation  go to  Android Animation Basics

 

Table Layout Example

Here is an example  of Table Layout  in which there are 3 Rows and each rows has 1 or more Columns



        

<TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*" 
            android:stretchColumns="*" 
            android:background="#ffffff">

                        <!-- Row 1 with single column -->

                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:textSize="18dp" 
                                android:text="Row 1" 
                                android:layout_span="3"
                                android:padding="18dip"
                                android:background="#b0b0b0"
                                android:textColor="#000"/>

                       </TableRow>
         
                        <!-- Row 2 with 3 columns -->

                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">
                            
                            <TextView
                                android:id="@+id/TextView04"
                                android:text="Row 2 column 1"
                                android:layout_weight="1" 
                                android:background="#dcdcdc"
                                android:textColor="#000000"
                                android:padding="20dip"
                                android:gravity="center"/>
                            <TextView
                                android:id="@+id/TextView04"
                                android:text="Row 2 column 2"
                                android:layout_weight="1" 
                                android:background="#d3d3d3"
                                android:textColor="#000000"
                                android:padding="20dip" 
                                android:gravity="center"/>
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 2 column 3"
                                android:layout_weight="1" 
                                android:background="#cac9c9"
                                android:textColor="#000000"
                                android:padding="20dip" 
                                android:gravity="center"/>
                        </TableRow>
                         
                        <!-- Row 3 with 2 columns -->

                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">
                            
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 3 column 1"
                                android:layout_weight="1"  
                                android:background="#b0b0b0"
                                android:textColor="#000000"
                                android:padding="18dip" 
                                android:gravity="center"/>
                     
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 3 column 2"
                                android:layout_weight="1" 
                                android:background="#a09f9f"
                                android:textColor="#000000"
                                android:padding="18dip" 
                                android:gravity="center"/>
                        </TableRow>
                         
      </TableLayout>




*********************************************************************************


Lets have a live example and create a User Login Screen


Create Login Screen Using Table Layout




Table Layout In Android






<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
            
            
                        <TableRow  
                                 android:paddingTop="10px"
                                 android:gravity="center">
                             
                             <TextView
                                 android:id="@+id/status"
                                 android:layout_width="wrap_content"
                                 android:layout_gravity="center"
                                 android:layout_span="2"
                                 android:text="LOGIN"
                                 android:textColor="#890000"
                                 android:textSize="15sp"
                                 android:textStyle="bold" />
                        
                         </TableRow>
                         
                        <TableRow android:layout_marginTop="20dip" >
                            
                            <TextView
                                android:layout_width="wrap_content"
                                android:text="Username :"
                                android:textSize="20sp"
                                android:textColor="#000000"
                                android:layout_marginLeft="20dip">
                         </TextView>
                        
                           <EditText
                               android:id="@+id/screenName"
                               android:layout_height="wrap_content"
                               android:layout_marginLeft="20dip"
                               android:layout_marginRight="20dip"
                               android:layout_weight="1" >
                                
                            </EditText>
                           
                         </TableRow>

                         <TableRow android:layout_marginTop="20dip" >
                             
                            <TextView 
                                 android:text="Password :"  
                            android:layout_width="wrap_content"
                            android:textSize="20sp"
                            android:textColor="#000000"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dip">
                                
                            </TextView>
                        
                           <EditText
                               android:id="@+id/password"
                               android:layout_height="wrap_content"
                               android:layout_marginLeft="20dip"
                               android:layout_marginRight="20dip"
                               android:layout_weight="1" >
                                
                            </EditText>
                           
                         </TableRow>

                         <TableRow 
                             android:gravity="center"
                             android:layout_marginTop="20dip" >
                         
                            <Button
                            android:text="Submit"
                            android:clickable="true"
                          android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:id="@+id/save"
                            android:layout_span="2" >
                                
                            </Button>  
                         </TableRow>
            
     </TableLayout>



More Layout Tutorial In Android
Relative Layout In Android                                                            
Table Layout                                                                         
Frame Layout(With Example)                                                    
Absolute Layout                                                                             
Grid Layout    
To learn Basic of Android Animation  go to  Android Animation Basics




  More Android Topics

New Advance Topics:                   Android LiveWallpaer Tutorial
Android ImageSwitcher                    Android TextSwitcher                                Android ViewFlipper
Android Gesture Detector               Handling/Detecting Swap Events                Gradient Drawable
Detecting Missed Calls                    Hide Title Bar                                           GridView Animation
Android AlarmManager                 Android BootReceiver                       Vibrate Phone In a Desirable Pattern    
Developing for Different Screen Sizes           Showing Toast for Longer Time       Publishing your App
How to publish Android App on Google Play

 Beginning With Android
      Android : Introduction(What is Android)                                                 Configuring Eclipse for Android Development
     Creating Your First Android Project                                           Understanding Android Manifest File of your android app

 Advance Android Topics                                                              Customizing Android Views


Working With Layouts                                                                Working With Views

Understanding Layouts in Android                                                   Using Buttons and EditText in Android
Working with Linear Layout (With Example)                                     Using CheckBoxes in Android
Nested Linear Layout (With Example)                                              Using AutoCompleteTextView in Android                                                                                          Grid View
Relative Layout In Android                                                               ListView
Table Layout                                                                                   Android ProgressBar
Frame Layout(With Example)                                                          Customizing ProgressBar
Absolute Layout                                                                             Customizing Radio Buttons
Grid Layout                                                                                    Customizing Checkboxes In Android

Android Components                                                                 Dialogs In Android

Activity In Android                                                                    Working With Alert Dialog
Activity Life Cycle                                                                    Adding Radio Buttons In Dialog
Starting Activity For Result                                                       Adding Check Boxes In Dialog
Sending Data from One Activity to Other in Android                    Creating Customized Dialogs in Android
Returning Result from Activity                                                   Creating Dialog To Collect User Input
Android : Service                                                                     DatePicker and TimePickerDialog
BroadcastReceiver                                                                   Using TimePickerDialog and DatePickerDialog In android

Menus In Android                                                                ListView:
Creating Option Menu                                                               Populating ListView With DataBase
Creating Context Menu In Android                                              Populating ListView with ArrayList
                                                                                               ListView with Custom Adapter

Toast                                                                                      Working With SMS
Customizing Toast In Android                                                       How to Send SMS in Android
Customizing the Display Time of Toast                                        How To Receive SMS
Customizing Toast At Runtime                                                  Accessing Inbox In Android
Adding Image in Toast
Showing Toast for Longer Time


TelephonyManager                                                            Storage: Storing Data In Android
Using Telephony Manager In Android                                          SharedPreferences In Android
                                                                                              Reading and Writing files to Internal Stoarage

Working With Incoming Calls                                       DataBase :  Introduction of SQLiteDataBase
How To Handle Incoming Calls in Android                                Working With Database in Android
How to Forward an Incoming Call In Android                            Creating Table In Android
CALL States In Android                                                          Inserting, Deleting and Updating Records In Table in Android


Miscellaneous
Notifications In Android
How To Vibrate The Android Phone
Sending Email In Android
Opening a webpage In Browser
How to Access PhoneBook In Android
Prompt User Input with an AlertDialog







4 comments: