Table Layout Tutorial With Example In Android

In Android, Table Layout is utilized to organize the gathering of perspectives into lines and segments. Table Layout holders don't show a fringe for their segments, columns or cells. A Table will have the same number of sections as the line with the most cells.

Important Points About Table Layout In Android:

For building a line in a table we will utilize the <TableRow> component. Table column objects are the youngster perspectives of a table layout.

Each line of the table has at least zero cells and every cell can hold just a single view protest like ImageView, TextView or some other view.

Add up to width of a table is characterized by its parent compartment

Section can be both stretchable and shrinkable. In the event that shrinkable, the width of section can be contracted to fit the table into its parent protest and in the event that stretchable, it can grow in width to fit any additional space accessible.

Important Note: We can't determine the width of the offspring's of the Table layout. Here, width dependably coordinate parent width. Be that as it may, the stature quality can be characterized by a kid; default estimation of tallness property is wrap content.

Basic Table Layout code in XML:

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:collapseColumns="0"> <!- - fall the primary segment of the table line - >

<!- - first column of the table layout- - >

<TableRow

android:id="@+id/row1"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<!- - Add components/segments in the main line - >

</TableRow>

</TableLayout>

Attributes of TableLayout in Android:

Presently allows we talk about some important attributes that assistance us to design a table layout in XML document (layout).

1. id: id credit is utilized to interestingly distinguish a Table Layout.

<TableLayout

android:id="@+id/simpleTableLayout"

android:layout_width="match_parent"

android:layout_height="match_parent/>

2. stretchColumns: Stretch section characteristic is utilized in Table Layout to change the default width of a segment which is set equivalent to the width of the most stretched out segment yet we can likewise extend the segments to take up accessible free space by utilizing this property. The esteem that alloted to this quality can be a solitary segment number or a comma delimited rundown of segment numbers (1, 2, 3… n).

On the off chance that the esteem is 1, the second section is extended to take up any accessible space in the line, in view of the segment numbers are begun from 0.

On the off chance that the esteem is 0,1, both the first and second segments of table are extended to take up the accessible space in the line.

On the off chance that the esteem is '*' every one of the sections are extended to take up the accessible space.

The following is the model code of stretch segment trait of table layout with clarification incorporated into which we extend the primary section of layout.

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

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

android:id="@+id/simpleTableLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:stretchColumns="1"> <!- - extend the second segment of the layout- - >

<!- - first line of the table layout- - >

<TableRow

android:id="@+id/firstRow"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<!- - first component of the line - >

<TextView

android:id="@+id/simpleTextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#b0b0b0"

android:padding="18dip"

android:text="Text 1"

android:textColor="#000"

android:textSize="12dp"/>

<TextView

android:id="@+id/simpleTextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#FF0000"

android:padding="18dip"

android:text="Text 2"

android:textColor="#000"

android:textSize="14dp"/>

</TableRow>

</TableLayout>

3. shrinkColumns: Shrink segment ascribe is utilized to shrivel or decrease the width of the column's. We can determine either a solitary segment or a comma delimited rundown of segment numbers for this property. The substance in the predetermined segments word-wraps to lessen their width.

On the off chance that the esteem is 0, the main segment's width recoils or diminishes by word wrapping its substance.

In the event that the esteem is 0,1, both first and second sections are contracts or decreased by word wrapping its substance.

In the event that the esteem is '*' the substance of all segments is word wrapped to shrivel their widths.

The following is the precedent code of psychologist section quality of table layout with clarification incorporated into which we shrivel the primary segment of layout.

<?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:shrinkColumns="0"> <!- - shrivel the main segment of the layout- - >

<!- - first line of the table layout- - >

<TableRow

android:id="@+id/firstRow"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<!- - first component of the principal push - >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#b0b0b0"

android:padding="18dip"

android:text="Shrink Column Example"

android:textColor="#000"

android:textSize="18dp"/>

</TableRow>

</TableLayout>

4. collapseColumns: fall sections ascribe is utilized to crumple or imperceptible the segment's of a table layout. These segments are the piece of the table data yet are imperceptible.

In the event that the qualities is 0, the primary segment shows up crumbled, i.e it is the piece of table yet it is undetectable.

The following is the precedent code of crumple sections with clarification incorporated into which we fall the primary segment of table means first segment is a piece of table yet it is imperceptible so you can see just the second segment in screen capture.

<?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:collapseColumns="0"> <!- - crumple the main segment of the table column - >

<!- - first line of the table layout- - >

<TableRow

android:id="@+id/simpleTableLayout"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<!- - first component of the column that is the piece of table yet it is undetectable - >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#b0b0b0"

android:padding="18dip"

android:text="Columns 1"

android:textColor="#000"

android:textSize="18dp"/>

<!- - second component of the line that is appeared in the screen capture - >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#b0b0b0"

android:padding="18dip"

android:text="Columns 2"

android:textColor="#000"

android:textSize="18dp"/>

</TableRow>

</TableLayout>

TableLayout Example In Android Studio:

The following is a case of Table layout in Android where we show a login frame with two fields client name and secret phrase and one login catch and at whatever point a client tap on that catch a message will be shown by utilizing a Toast..

Stage 1: Create another undertaking and name it TableLayoutExample

Stage 2: Open res - > layout - >activity_main.xml (or) main.xml and include following code:

In this progression we open a xml document ( activity_main.xml ) and include the code for showing username and secret key fields by utilizing textview and edittext with one login catch.

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#000"

android:orientation="vertical"

android:stretchColumns="1">

<TextView

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:layout_span="2"

android:gravity="center_horizontal"

android:text="@string/loginForm"

android:textColor="#0ff"

android:textSize="25sp"

android:textStyle="bold"/>

</TableRow>

<TextView

android:layout_height="wrap_content"

android:layout_column="0"

android:layout_marginLeft="10dp"

android:text="@string/userName"

android:textColor="#fff"

android:textSize="16sp"/>

<EditText

android:id="@+id/userName"

android:layout_height="wrap_content"

android:layout_column="1"

android:layout_marginLeft="10dp"

android:background="#fff"

android:hint="@string/userName"

android:padding="5dp"

android:textColor="#000"/>

</TableRow>

<TextView

android:layout_height="wrap_content"

android:layout_column="0"

android:layout_marginLeft="10dp"

android:layout_marginTop="20dp"

android:text="@string/secret key"

android:textColor="#fff"

android:textSize="16sp"/>

<EditText

android:id="@+id/secret key"

android:layout_height="wrap_content"

android:layout_column="1"

android:layout_marginLeft="10dp"

android:layout_marginTop="20dp"

android:background="#fff"

android:hint="@string/secret key"

android:padding="5dp"

android:textColor="#000"/>

</TableRow>

<Button

android:id="@+id/loginBtn"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_span="2"

android:background="#0ff"

android:text="@string/login"

android:textColor="#000"

android:textSize="20sp"

android:textStyle="bold"/>

</TableRow>

</TableLayout>

Stage 3: Open src - > package - > MainActivity.java

In this progression we open MainActivity and add the code to start the edittext and catch and after that perform click occasion on catch and show the message by utilizing a Toast.

package example.abhiandriod.tablelayoutexample;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.Toast;

open class MainActivity expands AppCompatActivity {

@Override

secured void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

/start a catch

Catch loginButton = (Button) findViewById(R.id.loginBtn);

/perform click occasion on the catch

loginButton.setOnClickListener(new View.OnClickListener() {

@Override

open void onClick(View v) {

Toast.makeText(getApplicationContext(), "Hi AbhiAndroid..!!!", Toast.LENGTH_LONG).show();/show a toast message

}

});

}

Stage 4: Open res - > values - > strings.xml

In this progression we open string document which is utilized to store string information of the application.

<string name="app_name">TableLayoutExample</string>

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="loginForm">Login Form</string>

<string name="userName">UserName</string>

<string name="password">Password</string>

<string name="login">LogIn</string>

</resources>

Android

Breaking

Thursday, 29 November 2018

Table Layout Tutorial With Example In Android | Android Solution | Table Layout