Android Note: Table Layout

A table layout is a grid which contains rows and columns. Each new row in the TableLayout is defined through a TableRow object. You can use TableLayout to organize UI (user Interface) or widgets for neatly align item on usescreen. There is a table row control for each row in your table.TableLayout do not display border lines for their rows, columns, or cells. <TableLayout> tag is the parent element and <TableRow> tag is its child of the parent element.

https://developer.android.com/images/ui/gridlayout.png

Syntax:

…………

………….

</TableLayout>

Table Row

TableRow is a layout where its elements are horizontally arranged. <TableRow> is used to store any view object such as text field, button and more. The children of the TableRow do not need to set the layout_width and layout_height attributes. These values are permanently MATCH_PARENT and WRAP_CONTENT respectively.

Syntax:

……….

</TableRow>

</TableLayout>

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="@string/table_layout_4_open"
android:padding="3dip" />
<TextView
android:text="@string/table_layout_4_open_shortcut"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:text="@string/table_layout_4_save"
android:padding="3dip" />
<TextView
android:text="@string/table_layout_4_save_shortcut"
android:gravity="right"
android:padding="3dip" />
</TableRow>
</TableLayout>

Stretching Column

The default width of a column is set equal to the width of the widest column, but we can stretch the column(s) to take up available free space using the android:stretchColumns attribute in the TableLayout.

· android:stretchColumns="1"—The second column (because the column numbers are zero-based) is stretched to take up any available space in the row.

· android:stretchColumns="0,1"—Both the first and second columns are stretched to take up the available space in the row.

· android:stretchColumns="*"—All columns are stretched to take up the available space

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

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:stretchColumns="*">

    <TableRow>

        <EditText

            android:id="@+id/searchText"

            android:text="Search text"

            android:layout_height="wrap_content"

            android:layout_width="wrap_content"

            android:layout_span="4" />

        <Button

            android:id="@+id/searchButton"

            android:text="Search"

            android:layout_height="wrap_content"

            android:layout_width="wrap_content"

            android:layout_span="1" />

    </TableRow>

</TableLayout>

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

Shrinking Columns

We can shrink or reduce the width of the column(s) using the android:shrinkColumns attribute in the TableLayout. We can specify either a single column or a comma-delimited list of column numbers for this attribute. The content in the specified columns word-wraps to reduce their width.

android:shrinkColumns="0"—The first column’s width shrinks or reduces by word-wrapping its content.
android:shrinkColumns="*"—The content of all columns is word-wrapped to shrink their widths.

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

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:shrinkColumns="*"

    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/TextView01"

            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/TextView02"

            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/TextView03"

            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/TextView05"

            android:text="Row 3 column 2"

            android:layout_weight="1"

            android:background="#a09f9f"

            android:textColor="#000000"

            android:padding="18dip"

            android:gravity="center"/>

    </TableRow>



</TableLayout>

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

Collapsing Columns

We can make the column(s) collapse or become invisible through the android: collapseColumns attribute in the TableLayout. We can specify one or more comma-delimited columns for this attribute. These columns are part of the table information but are invisible. We can also make column(s) visible and invisible through coding by passing the Boolean values false and true, respectively, to the setColumnCollapsed() method in the TableLayout. For example:

android:collapseColumns="0"—The first column appears collapsed; that is, it is part of the table but is invisible. It can be made visible through coding by using the setColumnCollapsed() method.

Spanning Columns

We can make a column span or take up the space of one or more columns by using the android:layout_span attribute. The value assigned to this attribute must be >=1. For example, the following value makes the control take or span up to two columns:

android:layout_span="2"

Creating Table Layout Programmatically

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



import android.graphics.Typeface;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.TypedValue;

import android.view.Gravity;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RadioButton;

import android.widget.RelativeLayout;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.widget.TextView;

import android.widget.Toast;



public class MainActivity extends AppCompatActivity {





    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        TableLayout table = new TableLayout(this);



        table.setStretchAllColumns(true);

        table.setShrinkAllColumns(true);



        TableRow rowTitle = new TableRow(this);

        rowTitle.setGravity(Gravity.CENTER_HORIZONTAL);



        TableRow rowDayLabels = new TableRow(this);

        TableRow rowHighs = new TableRow(this);

        TableRow rowLows = new TableRow(this);

        TableRow rowConditions = new TableRow(this);

        rowConditions.setGravity(Gravity.CENTER);



        TextView empty = new TextView(this);



        // title column/row

        TextView title = new TextView(this);

        title.setText("Java Weather Table");



        title.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18);

        title.setGravity(Gravity.CENTER);

        title.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TableRow.LayoutParams params = new TableRow.LayoutParams();

        params.span = 6;



        rowTitle.addView(title, params);



        // labels column

        TextView highsLabel = new TextView(this);

        highsLabel.setText("Day High");

        highsLabel.setTypeface(Typeface.DEFAULT_BOLD);



        TextView lowsLabel = new TextView(this);

        lowsLabel.setText("Day Low");

        lowsLabel.setTypeface(Typeface.DEFAULT_BOLD);



        TextView conditionsLabel = new TextView(this);

        conditionsLabel.setText("Conditions");

        conditionsLabel.setTypeface(Typeface.DEFAULT_BOLD);



        rowDayLabels.addView(empty);

        rowHighs.addView(highsLabel);

        rowLows.addView(lowsLabel);

        rowConditions.addView(conditionsLabel);



        // day 1 column

        TextView day1Label = new TextView(this);

        day1Label.setText("Feb 7");

        day1Label.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TextView day1High = new TextView(this);

        day1High.setText("28°F");

        day1High.setGravity(Gravity.CENTER_HORIZONTAL);



        TextView day1Low = new TextView(this);

        day1Low.setText("15°F");

        day1Low.setGravity(Gravity.CENTER_HORIZONTAL);



        ImageView day1Conditions = new ImageView(this);

        day1Conditions.setImageResource(R.drawable.button_custom);



        rowDayLabels.addView(day1Label);

        rowHighs.addView(day1High);

        rowLows.addView(day1Low);

        rowConditions.addView(day1Conditions);



        // day2 column

        TextView day2Label = new TextView(this);

        day2Label.setText("Feb 8");

        day2Label.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TextView day2High = new TextView(this);

        day2High.setText("26°F");

        day2High.setGravity(Gravity.CENTER_HORIZONTAL);



        TextView day2Low = new TextView(this);

        day2Low.setText("14°F");

        day2Low.setGravity(Gravity.CENTER_HORIZONTAL);



        ImageView day2Conditions = new ImageView(this);

        day2Conditions.setImageResource(R.drawable.signin);



        rowDayLabels.addView(day2Label);

        rowHighs.addView(day2High);

        rowLows.addView(day2Low);

        rowConditions.addView(day2Conditions);



        // day3 column

        TextView day3Label = new TextView(this);

        day3Label.setText("Feb 9");

        day3Label.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TextView day3High = new TextView(this);

        day3High.setText("23°F");

        day3High.setGravity(Gravity.CENTER_HORIZONTAL);



        TextView day3Low = new TextView(this);

        day3Low.setText("3°F");

        day3Low.setGravity(Gravity.CENTER_HORIZONTAL);



        ImageView day3Conditions = new ImageView(this);

        day3Conditions.setImageResource(R.drawable.b_press);



        rowDayLabels.addView(day3Label);

        rowHighs.addView(day3High);

        rowLows.addView(day3Low);

        rowConditions.addView(day3Conditions);



        // day4 column

        TextView day4Label = new TextView(this);

        day4Label.setText("Feb 10");

        day4Label.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TextView day4High = new TextView(this);

        day4High.setText("17°F");

        day4High.setGravity(Gravity.CENTER_HORIZONTAL);



        TextView day4Low = new TextView(this);

        day4Low.setText("5°F");

        day4Low.setGravity(Gravity.CENTER_HORIZONTAL);



        ImageView day4Conditions = new ImageView(this);

        day4Conditions.setImageResource(R.drawable.b_focus);



        rowDayLabels.addView(day4Label);

        rowHighs.addView(day4High);

        rowLows.addView(day4Low);

        rowConditions.addView(day4Conditions);



        // day5 column

        TextView day5Label = new TextView(this);

        day5Label.setText("Feb 11");

        day5Label.setTypeface(Typeface.SERIF, Typeface.BOLD);



        TextView day5High = new TextView(this);

        day5High.setText("19°F");

        day5High.setGravity(Gravity.CENTER_HORIZONTAL);



        TextView day5Low = new TextView(this);

        day5Low.setText("6°F");

        day5Low.setGravity(Gravity.CENTER_HORIZONTAL);



        ImageView day5Conditions = new ImageView(this);

        day5Conditions.setImageResource(R.drawable.abc);



        rowDayLabels.addView(day5Label);

        rowHighs.addView(day5High);

        rowLows.addView(day5Low);

        rowConditions.addView(day5Conditions);



        table.addView(rowTitle);

        table.addView(rowDayLabels);

        table.addView(rowHighs);

        table.addView(rowLows);

        table.addView(rowConditions);



        setContentView(table);



    }

}

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

program 2

Matrix view ( Programmatically)

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

package sichlearning.example.com.testone;



import android.graphics.Color;

import android.graphics.Typeface;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.util.TypedValue;

import android.view.Gravity;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.HorizontalScrollView;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RadioButton;

import android.widget.RelativeLayout;

import android.widget.ScrollView;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.widget.TextView;

import android.widget.Toast;



import java.util.Random;



public class MainActivity extends AppCompatActivity {





    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        String[] row = { "ROW1", "ROW2", "Row3", "Row4", "Row 5", "Row 6",

                "Row 7" };

        String[] column = { "COLUMN1", "COLUMN2", "COLUMN3", "COLUMN4",

                "COLUMN5", "COLUMN6" };

        int rl=row.length; int cl=column.length;



        Log.d("--", "R-Lenght--"+rl+"   "+"C-Lenght--"+cl);



        ScrollView sv = new ScrollView(this);

        TableLayout tableLayout = createTableLayout(row, column,rl, cl);

        HorizontalScrollView hsv = new HorizontalScrollView(this);



        hsv.addView(tableLayout);

        sv.addView(hsv);

        setContentView(sv);



    }



    public void makeCellEmpty(TableLayout tableLayout, int rowIndex, int columnIndex) {

        // get row from table with rowIndex

        TableRow tableRow = (TableRow) tableLayout.getChildAt(rowIndex);



        // get cell from row with columnIndex

        TextView textView = (TextView)tableRow.getChildAt(columnIndex);



        // make it black

        textView.setBackgroundColor(Color.BLACK);

    }

    public void setHeaderTitle(TableLayout tableLayout, int rowIndex, int columnIndex){



        // get row from table with rowIndex

        TableRow tableRow = (TableRow) tableLayout.getChildAt(rowIndex);



        // get cell from row with columnIndex

        TextView textView = (TextView)tableRow.getChildAt(columnIndex);



        textView.setText("Hello");

    }



    private TableLayout createTableLayout(String [] rv, String [] cv,int rowCount, int columnCount) {

        // 1) Create a tableLayout and its params

        TableLayout.LayoutParams tableLayoutParams = new TableLayout.LayoutParams();

        TableLayout tableLayout = new TableLayout(this);

        tableLayout.setBackgroundColor(Color.BLACK);



        // 2) create tableRow params

        TableRow.LayoutParams tableRowParams = new TableRow.LayoutParams();

        tableRowParams.setMargins(1, 1, 1, 1);

        tableRowParams.weight = 1;



        for (int i = 0; i < rowCount; i++) {

            // 3) create tableRow

            TableRow tableRow = new TableRow(this);

            tableRow.setBackgroundColor(Color.BLACK);



            for (int j= 0; j < columnCount; j++) {

                // 4) create textView

                TextView textView = new TextView(this);

                //  textView.setText(String.valueOf(j));

                textView.setBackgroundColor(Color.WHITE);

                textView.setGravity(Gravity.CENTER);



                String s1 = Integer.toString(i);

                String s2 = Integer.toString(j);

                String s3 = s1 + s2;

                int id = Integer.parseInt(s3);

                Log.d("TAG", "-___>"+id);

                if (i ==0 && j==0){

                    textView.setText("0==0");

                } else if(i==0){

                    Log.d("TAAG", "set Column Headers");

                    textView.setText(cv[j-1]);

                }else if( j==0){

                    Log.d("TAAG", "Set Row Headers");

                    textView.setText(rv[i-1]);

                }else {

                    textView.setText(""+id);

                    // check id=23

                    if(id==23){

                        textView.setText("ID=23");



                    }

                }



                // 5) add textView to tableRow

                tableRow.addView(textView, tableRowParams);

            }



            // 6) add tableRow to tableLayout

            tableLayout.addView(tableRow, tableLayoutParams);

        }



        return tableLayout;

    }

}

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

Android Note

Wednesday 17 August 2016

Table Layout

Spanning Columns

No comments:

Post a Comment