Android To make part of the visible screen scrollable

Question

I searched net to find the answer for my following problem. But no answer found. I myself tried several ways, but I am still a novice at Android. What I found on net related to scrolling is official documentation and examples of scrolling on http://developer.android.com, Mr. Senthilkumar's How to scroll the screen, Kakka47's ScrollView only part of the screen, darrinps A scroll view with only part of the screen scrolling, etc.

This is very common requirement as is clear from above titles. I have following screen layout as shown in figure.

The screen from top to column titles is stable. The table records, below column titles needs to scroll. I have AbsoluteLayout (I know it is deprecated but that is the only one I can use for by specific need), inside it a scrollview and inside scrollview a TableLayout.

User clicks "Add" button to add the orders received. One order in one row. As rows increase, they go beyond visible area. Therefore, I want it to scroll so user can access it. But this part is not scrolling. I have given the listing of my code. Please tell me what to do.

Code:

    package com.BookOrders;

    import java.util.Calendar;

    import android.app.Activity;
    import android.app.DatePickerDialog;
    import android.app.Dialog;
    import android.content.Context;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AbsoluteLayout;
    import android.widget.Button;
    import android.widget.CheckBox;
    import android.widget.DatePicker;
    import android.widget.EditText;
    import android.widget.ScrollView;
    import android.widget.Spinner;
    import android.widget.TableLayout;
    import android.widget.TableRow;
    import android.widget.TextView;

    //import android.widget.TableRow.LayoutParams;

    @SuppressWarnings("deprecation")
    public class BookOrders extends Activity implements ScrollViewListener{
    /** Called when the activity is first created. */
private TextView BookingDateDisplay;    
private Button ChangeDate, AddRec, DeleteRec, SaveAll;
private CheckBox SelectedAll, SelectedRec;
private ObservableScrollView CustomScroller = null;
private ObservableScrollView CustomScrolled = null;
private int ChangedYear;    
private int ChangedMonth;    
private int ChangedDay;
public Context CurrentContext, UsedContext;
static final int DATE_DIALOG_ID = 0;
int  IdGenerator = 100000;
int Number_of_Records = 0; 
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);
    @SuppressWarnings("deprecation")
    final AbsoluteLayout main = (AbsoluteLayout)findViewById(R.id.widget0);
    CurrentContext = main.getContext();
    //final ScrollView ScrollControl = (ScrollView)findViewById(R.id.scroller);
    //final AbsoluteLayout LayerControl = (AbsoluteLayout)findViewById(R.id.FinalLayer);
   // UsedContext = LayerControl.getContext();
 // capture our View elements  
    CustomScroller = (ObservableScrollView) findViewById(R.id.scrollContainer);

    BookingDateDisplay = (TextView) findViewById(R.id.BookedDate);        
    ChangeDate = (Button) findViewById(R.id.pickDate);        
    AddRec = (Button) findViewById(R.id.AddRecord);
    DeleteRec = (Button) findViewById(R.id.DeleteRecord);
    SaveAll = (Button) findViewById(R.id.SaveRecord);
    SelectedAll = (CheckBox) findViewById(R.id.SelectAll);

    // add a click listener to the button        
    ChangeDate.setOnClickListener(new View.OnClickListener() {            
        public void onClick(View v) {                
            showDialog(DATE_DIALOG_ID);            
        }
    }); 
    AddRec.setOnClickListener(new View.OnClickListener() { 
        public void onClick(View AddRecView) { 
            IdGenerator = IdGenerator+10;
            UsedContext = AddRecView.getContext();
            TableRow Tr = new TableRow(UsedContext);
            for (int controls=0; controls<6; controls++) {

                if (controls==0){
                    CheckBox RecordCheck = new CheckBox(UsedContext);
                    RecordCheck.setId(IdGenerator+controls);
                    RecordCheck.setTag("CheckBoxTag");
                    RecordCheck.setHeight(20);
                    RecordCheck.setWidth(25);
                    Tr.addView(RecordCheck);
                }
                if ((0 < controls ) && (controls<5)){
                    Spinner Record   = new Spinner(UsedContext);
                    Record.setId(IdGenerator+controls);
                    //Record.setMinimumHeight(20);
                    //Record.setMinimumWidth(90);
                    Tr.addView(Record);
                }
                if (controls==5){
                    EditText OrderQuantity = new EditText(UsedContext);
                    OrderQuantity.setId(IdGenerator+controls);
                    //OrderQuantity.setHeight(20);
                    //OrderQuantity.setWidth(90);
                    Tr.addView(OrderQuantity);
                }

            }
            TableLayout Orders = (TableLayout)findViewById(R.id.OrderData);
            Orders.addView(Tr);
            // Scrolls to line before last - why?
            final ScrollView ScrollAttempt = (ScrollView) findViewById(R.id.scrollContainer);
            ScrollAttempt.post(new Runnable() {
                public void run() {
                    ScrollAttempt.fullScroll(View.FOCUS_DOWN);
                }

            });
            Number_of_Records = Number_of_Records + 1;
          }

    });
    // updates the date in the TextView    
    private void updateDisplay() {        
    BookingDateDisplay.setText(            
            new StringBuilder()                    
            .append(ChangedDay).append("-") 
            .append(ChangedMonth + 1).append("-")       // Month is 0 based so add 1  
            .append(ChangedYear).append(" "));    

}
// the call back received when the user "sets" the date in the dialog    

    private DatePickerDialog.OnDateSetListener DateSetListener =            
        new DatePickerDialog.OnDateSetListener(){
            public void onDateSet(DatePicker view, int year,  int monthOfYear, int dayOfMonth) {                    
            ChangedYear = year;                    
            ChangedMonth = monthOfYear;                    
            ChangedDay = dayOfMonth;                    
            updateDisplay();                
            }            
        };
        @Override
        protected Dialog onCreateDialog(int id) {    
            switch (id) {    
                case DATE_DIALOG_ID:        
                    return new DatePickerDialog(this, DateSetListener, ChangedYear, ChangedMonth, ChangedDay);    
                    }    
            return null;
            }
        public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
            if(scrollView == CustomScroller) {
                CustomScrolled.scrollTo(x, y);
            } else if(scrollView == CustomScrolled) {
                CustomScroller.scrollTo(x, y);
            }
        }

 }

My main.xml:

    <?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <!-- <ImageButton android:text="Date" android:layout_height="20px" android:layout_width="32px" android:id="@+id/BDate" android:layout_x="274dip" android:layout_y="51dip"></ImageButton> -->

    <TextView
        android:id="@+id/Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="81dip"
        android:layout_y="10dip"
        android:background="#0ff0ff"
        android:gravity="center"
        android:text="Order Booking"
        android:textColor="#330000"
        android:textSize="20sp"
        android:textStyle="bold"
        android:typeface="serif" >
    </TextView>

    <TextView
        android:id="@+id/BDate_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="277dip"
        android:layout_y="52dip"
        android:gravity="right"
        android:text="Booked on:"
        android:textSize="12sp" >
    </TextView>

    <TextView
        android:id="@+id/BookedDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="350dip"
        android:layout_y="52dip"
        android:text=""
        android:textSize="12sp" >
    </TextView>

    <Button
        android:id="@+id/pickDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="400dip"
        android:layout_y="15dip"
        android:text="Change Date"
        android:textSize="10sp" >
    </Button>

    <View
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:layout_y="68dp"
        android:background="@drawable/gradient" >
    </View>

    <Button
        android:id="@+id/AddRecord"
        android:layout_width="120dp"
        android:layout_height="34dp"
        android:layout_x="10dip"
        android:layout_y="71dip"
        android:text="Add"
        android:textSize="10sp" >
    </Button>

    <Button
        android:id="@+id/DeleteRecord"
        android:layout_width="120dp"
        android:layout_height="34dp"
        android:layout_x="140dp"
        android:layout_y="71dp"
        android:text="Delete"
        android:textSize="10sp" >
    </Button>

    <Button
        android:id="@+id/ClearRecord"
        android:layout_width="120dp"
        android:layout_height="34dp"
        android:layout_x="270dp"
        android:layout_y="71dp"
        android:text="Clear"
        android:textSize="10sp" >
    </Button>

    <Button
        android:id="@+id/SaveRecord"
        android:layout_width="120dp"
        android:layout_height="34dp"
        android:layout_x="400dp"
        android:layout_y="71dp"
        android:text="Save"
        android:textSize="10sp" >
    </Button>

    <View
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_y="110dp"
        android:background="@drawable/gradient" >
    </View>

    <CheckBox
        android:id="@+id/SelectAll"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_x="10dip"
        android:layout_y="115dip"
        android:text="Select All"
        android:textSize="10sp" >
    </CheckBox>

    <TextView
        android:id="@+id/Company"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="95dip"
        android:layout_y="115dip"
        android:background="#666666"
        android:text="Company"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

    <TextView
        android:id="@+id/Product"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="200dip"
        android:layout_y="115dip"
        android:background="#666666"
        android:text="Product"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

    <TextView
        android:id="@+id/Code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="300dip"
        android:layout_y="115dip"
        android:background="#666666"
        android:text="Code"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

    <TextView
        android:id="@+id/Model"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="380dp"
        android:layout_y="115dp"
        android:background="#666666"
        android:text="Model"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

    <TextView
        android:id="@+id/Quantity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="470dp"
        android:layout_y="115dp"
        android:background="#666666"
        android:text="Quantity"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

    <View
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_x="0dip"
        android:layout_y="134dip"
        android:background="@drawable/gradient" >
    </View>

    <com.BookOrders.ObservableScrollView
        android:id="@+id/scrollContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_x="1dp"
        android:layout_y="140dp"
        android:clickable="true"
        android:fadeScrollbars="false"
        android:fillViewport="true" >

        <TableLayout
            android:id="@+id/OrderData"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:stretchColumns="0,1,2,3,4" />
    </com.BookOrders.ObservableScrollView>

</AbsoluteLayout>

Answer 1

Have you tried a ScrollView? You can find more about ScrollView here

Here is an example of how to use ScrollView:

 <ScrollView
        android:id="@+id/coupons_details_scroll_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
<!--You can nest any other views here, and they will be scrollable, but take care of views that have their own scrolling capabilities like ListView -->
</ScrollView>

Good luck with it :)

Answer 2

I worked out the solution for this. For those who would like to know can first go through the following link http://blog.stylingandroid.com/archives/447

I used this logic. However, I create rows dynamically when user clicks "Add" button. The only problem is, if you use spinner you won't be able to set its height zero.

Nitin