Android : Button, TextView and EditText

In this post we will discuss about 3 majorly used components in android.

1. TextView

Displays text to the user. You can take is as a label.

Important properties of TextView : 

android:id :- To define unique identity to your textview.

android:layout_width :- To define width of textview.

android:layout_height :- To define height of textview.

android:text :- To define text of textview.

Sample code :

<TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to android" />

2. EditText 

EditText is a predefined subclass of TextView that includes rich editing capabilities.

Important properties of EditText : 

android:id :- To define unique identity to your EditText.

android:textColor :- To define text color of EditText contents.

android:editable : - If set, specifies that this EditText has an input method.

Sample Code :

<EditText android:id="@+id/edtName"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:hint="Enter UserName"

        android:textColor="#000000"/>

3. Button

A push-button that can be pressed, or clicked, by the user to perform an action.

Important properties of Button :

android:id :- To define unique identity to your Button.
android:background :- This is a drawable to use as the background.
android:onClick :- To define the method name which will be invoke when button is clicked.

Sample Code :

<Button android:id="@+id/btnSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        android:background="#FF0000"/>



Now we will develop one application with use of these controls.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.textviewdemo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="14" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.textviewdemo.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <EditText android:id="@+id/edtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter UserName"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:textColor="#000000"/>
 
    <Button android:id="@+id/btnSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Save"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/edtName"/>
 
    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnSave"
        android:layout_marginTop="10dp"/>
 
</LinearLayout>

MainActivity,java

package com.ravi.textviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

    Button btnSave;
    EditText edtName;
    TextView tvName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        btnSave=(Button)findViewById(R.id.btnSave);
        edtName=(EditText)findViewById(R.id.edtName);
        tvName=(TextView)findViewById(R.id.tvName);
        
        btnSave.setOnClickListener(this);
    }
 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  if(v.getId()==R.id.btnSave)
  {
   String name=edtName.getText().toString();
   tvName.setText("Welcome " + name);
  }
 }    
}

Output :

Android Layouts : Linear, Relative And Table Layout

In this post I will be discussing about the different view layouts in an android mobile application.

1. Linear Layout
2. Relative Layout
3. Table Layout

Android layout allows you to create graphical view of your application. All layouts will be placed inside res/layout folder.

1. Linear Layout

Linear layout is a viewgroup that aligns all children in a single direction , vertically or horizontally.

horizontal : 

<LinearLayout android:orientation="horizontal">  . . . .  </LinearLayout>

Vertical :
<LinearLayout android:orientation="vertical">  . . . .  </LinearLayout>

Example for horizontal : 

<LinearLayout android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />
    </LinearLayout>


Output :







Example for vertical :




<LinearLayout android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />
    </LinearLayout>


Output : 







2.Relative Layout

RelativeLayout is a view group that displays child views in relative positions.


Example : 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Button1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:text="Button2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_toRightOf="@+id/button2"
        android:text="Button3" />
</RelativeLayout>

Output :




3. Table Layout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns Its very easy to understand.




Example :

<tablelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:shrinkcolumns="*"
    android:stretchcolumns="*" >

    <!-- Row 1 with single column -->

    <tablerow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <textview
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Row 1"
            android:textcolor="#000"
            android:textsize="18dp" >
        </textview>
    </tablerow>
    <!-- Row 2 with 3 columns -->

    <tablerow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <textview
            android:id="@+id/TextView04"
            android:layout_weight="1"
            android:background="#dcdcdc"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 1"
            android:textcolor="#000000" >

            <textview
                android:id="@+id/TextView04"
                android:layout_weight="1"
                android:background="#d3d3d3"
                android:gravity="center"
                android:padding="20dip"
                android:text="Row 2 column 2"
                android:textcolor="#000000" >

                <textview
                    android:id="@+id/TextView04"
                    android:layout_weight="1"
                    android:background="#cac9c9"
                    android:gravity="center"
                    android:padding="20dip"
                    android:text="Row 2 column 3"
                    android:textcolor="#000000" >
                </textview>
            </textview>
        </textview>
    </tablerow>
    <!-- Row 3 with 2 columns -->

    <tablerow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <textview
            android:id="@+id/TextView04"
            android:layout_weight="1"
            android:background="#b0b0b0"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 1"
            android:textcolor="#000000" >

            <textview
                android:id="@+id/TextView04"
                android:layout_weight="1"
                android:background="#a09f9f"
                android:gravity="center"
                android:padding="20dip"
                android:text="Row 3 column 2"
                android:textcolor="#000000" >
            </textview>
        </textview>
    </tablerow>
</tablelayout>

Output :