ScrollView Layout

This tutorial is to show how to use Vertical and Horizontal scrollviews in Android.

Below example uses a table with multiple rows, once the table exceeds the size of the screen, it automatically scrolls vertically or horizontally.
The below code shows how to build a Textview and TableLayout view with multiple rows dynamically.

The following widgets need for building a scroll view

• ScrollView
• HorizontalScrollView
• A TableLayout view with multiple rows added and
• A TextView to display text inside the table rows.

1. Create an Android Application Project.
2. Go to /YOUR_PROJECT/res/layout/activity_main.xml and add a scrollview to xml as shown in below code.
   
   
   <ScrollView android:id="@+id/myscroll1"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   />

1. • First create a TableLayout, TableRow and Textview.
   • Then add TextView to TableRow , then add TableRow to TableLayout.
   • Finally add TableLayout to Scrollview defined in Step.2 .
2. Add the following code in MainActivity.java.
   
   TableLayout tableLayout;

   ScrollView scrollView;

   @Override

   protected void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);

   setContentView(R.layout.activity_main);

   scrollView = (ScrollView)findViewById(R.id.myscroll1);

   tableLayout=new TableLayout(this);

   for(int i=1;i<50;i++) {

   TableRow tableRow=new TableRow(this);

   TextView text=new TextView(this);

   text.setId(i);

   text.setText(" WhiteSof Test: "+i);

   tableRow.addView(text);

   tableLayout.addView(tableRow);

   }

   scrollView.addView(tableLayout);

   }
   
   
3. Horizontal scrollbars are added by using HorizontalScrollView as shown below.
   
   
   <ScrollView

           android:id="@+id/id_Scroll"

           android:layout_width="fill_parent"

           android:layout_height="fill_parent">

    <HorizontalScrollView

               android:id="@+id/id_hScroll"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content">

                <TableLayout 

                   android:id="@+id/id_mainTable"

                   android:layout_width="wrap_content"

                   android:layout_height="wrap_content">

                    

                </TableLayout>

            </HorizontalScrollView>

   <ScrollView>

Layout Inflater & Simple Adapter

In this tutorial, I will show you sample code of Layouf Inflater and Simple Adapter. See Sample output below:

Add this code in your main.java:

final ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();

for(int x=1; x <=i; x++)
{
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("Name", LoadPreferences("rec_name" + x, ""));
map.put("Address", LoadPreferences("rec_add" + x, ""));
map.put("Relation", LoadPreferences("rec_relation" + x, ""));
xx = LoadPreferences("rec_image"  + x, "");
if (xx.equals(""))
{
map.put("Rec_image", Integer.toString(resID));
}
else
{
map.put("Rec_image", LoadPreferences("rec_image"  + x, ""));
}
list.add(map);
}

spin = (Spinner) findViewById(R.id.receiver);
adapter = new myAdapter(getApplicationContext(), list, R.layout.sample, 
new String[] { "Name", "Address", "Relation", "Rec_image"},
new int[] { R.id.name, R.id.kyc, R.id.relation, R.id.image});

spin.setAdapter(adapter);
       
spin.setOnItemSelectedListener(new OnItemSelectedListener(){

@Override
public void onItemSelected(AdapterView<?> arg0,View v, int arg2,long arg3) {
// TODO Auto-generated method stub
String selected = (String) list.get(spin.getSelectedItemPosition()).get("Name");
SavePreferences("name", selected );
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
}); 

class myAdapter extends SimpleAdapter {

private Context mcontext;
    public myAdapter(Context context, List<? extends Map<String, ?>> data,
        int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        mcontext = context;

    }

@SuppressWarnings("unchecked")
@Override
    public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater object = (LayoutInflater)mcontext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      if (convertView == null) 
      {
                convertView = object.inflate(R.layout.sample,
                       null);
           }

           HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);

           ((TextView) convertView.findViewById(R.id.tt_month)).setText((String) data.get("DateMonth"));
           ((TextView) convertView.findViewById(R.id.tt_day)).setText((String) data.get("DateDay"));
           ((TextView) convertView.findViewById(R.id.title_history)).setText((String) data.get("Name"));
           ((TextView) convertView.findViewById(R.id.value_history)).setText((String) data.get("Amount"));
           ((TextView) convertView.findViewById(R.id.history)).setText((String) data.get("Status"));
           ((TextView) convertView.findViewById(R.id.tt_count)).setText((String) data.get("Count"));
   
           return convertView;
    }


}


This is your sample.xml that inflate in other xml. See output and code below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" 
   android:layout_width="fill_parent"
   android:background="#FFFFFF"
   android:layout_height="wrap_content">
   
<LinearLayout
   android:orientation="horizontal" 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:background="@drawable/border_bottom"
   android:weightSum="90">
   
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="25"
            android:background="#FEFFFC"
            android:orientation="horizontal"
            android:weightSum="20" >
            
 <LinearLayout
     android:id="@+id/dates"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="15"
     android:paddingTop="5dp"
     android:weightSum="100"
     android:orientation="vertical" >
     
<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="10"
   android:background="@drawable/ic_date"
   android:orientation="vertical" >

<TextView
   android:id="@+id/tt_month"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:textColor="#FFFFFF"
   android:gravity="center_horizontal"
   android:paddingTop="4dp"
   android:textSize="8sp"
   android:textStyle="bold"
   android:text="Date" />

<TextView
   android:id="@+id/tt_day"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:textColor="#6E6E6E"
   android:textStyle="bold"
   android:gravity="center_horizontal"
   android:textSize="23sp"
   android:text="20"
   android:paddingBottom="5dp"
   android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

    <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:layout_weight="90"
       android:background="#FFFFFF"
       android:orientation="vertical" >

</LinearLayout>

   
 </LinearLayout>
 
 <LinearLayout
     android:id="@+id/name"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="5" >

 <TextView
     android:id="@+id/title_history"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="top|left"
     android:paddingTop="3dp"
     android:paddingLeft="3dp"
     android:text="Jmarv Parba"
     android:textAppearance="?android:attr/textAppearanceSmall"
     android:textColor="#6E6E6E"
     android:textSize="16sp" />

</LinearLayout>
  </LinearLayout>

  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      android:layout_weight="30"
      android:background="#FEFFFC"
      android:orientation="horizontal" >

  <TextView
      android:id="@+id/value_history"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:gravity="top|center"
      android:paddingTop="3dp"
      android:text="P100"
      android:textAppearance="?android:attr/textAppearanceSmall"
      android:textColor="#6E6E6E"
      android:textSize="16sp" />

      </LinearLayout>
      
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      android:layout_weight="35"
      android:background="#FEFFFC"
      android:weightSum="3"
      android:orientation="horizontal" >

  <TextView
      android:id="@+id/history"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:gravity="top|center"
      android:paddingTop="3dp"
      android:text="Success"
      android:layout_weight="1"
      android:textAppearance="?android:attr/textAppearanceSmall"
      android:textColor="#6E6E6E"
      android:textSize="16sp" />

  <TextView
      android:id="@+id/tt_count"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="#FFFFFF"
      android:layout_weight="2"
      android:text="0" />

      </LinearLayout>
   
   </LinearLayout>

   
</LinearLayout>


This is the main layout where you can see a listview and the sample.xml will be inflated this main.xml.

That's All. Hope this may help you...