Android ScrollView, TableLayout

Filed Under: Android

Today we will learn about Android ScrollView and Android TableLayout. This is the third tutorial in the android layout series, you can learn about android layout and android FrameLayout in earlier tutorials.

Android ScrollView

Android ScrollView is a special type of FrameLayout that allows users to scroll through a list of views that occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayout.

Note: Do not use a ListView together with the ScrollView. The ListView is designed for showing a list of related information and is optimized for dealing with large lists. Also it contains scrolling capabilities inbuilt.

  1. Android ScrollView only supports vertical scrolling. We have to use HorizontalScrollView for horizontal scrolling.
  2. The android:fillViewport property defines whether the scrollview should stretch its content to fill the viewport.

Android ScrollView Example

layout_scroll.xml


<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    android:id="@+id/widget54"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <LinearLayout
        android:layout_width="310px"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Back"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 1"
            />
        <Button
            android:id="@+id/button3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 2"
            />
        <TextView
            android:text="This textView is placed inside 
            a LinearLayout which is a child ViewGroup 
            contained in a ScrollView"
            android:layout_width="fill_parent"
            android:textSize="18sp"
            android:layout_height="750px"
            />
        <Button
            android:id="@+id/button4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 3"
            />
        <Button
            android:id="@+id/button5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 4"
            />
    </LinearLayout>
</ScrollView>

To ensure that the ScrollView comes into use we’ve explicitly assigned a larger size of the layout_height of the TextView.

Android TableLayout

Android TableLayout organizes its views in the form of rows and columns. <TableRow> element is used to build a row in the table. Each row has zero or more cells and each cell can hold one View object.

Android TableLayout Attributes

  1. android:id : This is the ID which uniquely identifies the layout
  2. android:collapseColumns : This specifies the zero-based index of the columns to collapse. The column indices must be separated by a comma like 1, 2, 5
  3. android:collapseColumns : The zero-based index of the columns to shrink. The column indices must be separated by a comma like 1, 2, 5
  4. android:stretchColumns : The zero-based index of the columns to stretch. The column indices must be separated by a comma like 1, 2, 5
  5. android:layout_column : This is used to specify the column in which the view should be placed. By default a view is placed in the first unused column
  6. android:layout_span : This is used to specify if a view should occupy more than one column. For example 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

Here is an XML using TableLayout configuration.
layout_table.xml


<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TableRow>
        <Button
            android:id="@+id/next"
            android:text="Next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="First Name"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1" />
        <EditText
            android:hint="JournalDev.com"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="Last Name"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1" />
        <EditText
            android:hint="TableLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
</TableLayout>

In table layout two rows consists of two columns containing a EditText and a TextView the other remaining row consists of a single column only.

Android ScrollView TableLayout Example Project Structure

Android ScrollView, Android TableLayout Example

This project consists of two Activities : MainActivity and SecondActivity depicting the TableLayout and ScrollView respectively.

Android ScrollView TableLayout Example code

The MainActivity displays the TableLayout. The xml layout was discussed above. The code for the java file is given below.


package com.journaldev.layoutspartthree;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    Button next;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_table);

        next=(Button)findViewById(R.id.next);
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                startActivity(intent);
            }
        });

    }

    @Override
    public void onBackPressed() {
        finish();
    }
}

The SecondActivity.java given below contains the ScrollView with a LinearLayout inside it.


package com.journaldev.layoutspartthree;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SecondActivity extends Activity {

    Button back;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_scroll);

        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(SecondActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });
    }
}

The images given below are the outputs produced by the android scroll view and table layout project.

Android TableLayout Example

In the above image the individual columns in all the three rows are highlighted.

android scrollview example

The vertical scrollbars are visible at the right side of the screen.

This brings an end to android ScrollView and TableLayout tutorial. You can download the Android ScrollView and TableLayout Project from the below link:

References: TableLayout Official Doc, ScrollView Official Doc

Comments

  1. vinodh says:

    your tutorial is good. I need number of buttons grid view with scrollable…!!!!!!!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages