Work with RadioButton , CheckBox, Spinner , EditText, TextView and Button in Android

In this tutorial, I show you how to use XML to create 

1. RadioButton in XML file, and grouped in a RadioGroup. When Button is clicked, display which RadioButton is selected.
2. CheckBox in XML file, and demonstrates the use of listener to check the CheckBox state – checked or unchecked.
3. EditText in XML file, and how to get value from EditText when we select the Button.
4. Spinner in XML file, how to select one particular from many given values and display which value is selected.
5. TextView in XML file, it is used to show the value or result .
6. Button in XML file, which help us to get values from several widget on a single click.

Now I write here the XML code 

activity_layout_interface.xml

<RelativeLayout xmlns:tools="http://schemas.android.com/tools"

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <EditText

        android:id="@+id/editTextName"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="20dp"

        android:ems="10"

        android:hint="Enter Your Name Here"

        android:inputType="textPersonName" >

        <requestFocus />

    </EditText>

    <LinearLayout

        android:id="@+id/linearLayout1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/editTextName"

        android:layout_centerHorizontal="true"

        android1:layout_marginTop="17dp" >

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Gender:: "

            android:textAppearance="?android:attr/textAppearanceMedium" />

        <RadioGroup

            android:id="@+id/radioGroup1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" >

            <RadioButton

                android:id="@+id/radio0"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"               

                android:text="Male" />

        

        <RadioButton

            android:id="@+id/radio1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Female" />

        </RadioGroup>

    </LinearLayout>

    <LinearLayout

        android:id="@+id/linearLayout2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/linearLayout1"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="30dp" >

        <TextView

            android:id="@+id/textView2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_marginLeft="55dp"

            android:text="Age:: "

            android:textAppearance="?android:attr/textAppearanceMedium" />

        <Spinner

            android:id="@+id/spinner1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:entries="@array/ageGroup" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/linearLayout3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/linearLayout2"

        android:layout_centerHorizontal="true" >

        <TextView

            android:id="@+id/textView3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Hobby:: "

            android:textAppearance="?android:attr/textAppearanceMedium" />

        <CheckBox

            android:id="@+id/checkBox1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Cricket" />

        <CheckBox

            android:id="@+id/checkBox2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Football" />

    </LinearLayout>

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/linearLayout3"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="48dp"

        android:text="SUBMIT" />

    <TextView

        android:id="@+id/result"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/button1"

        android:layout_marginTop="22dp"

        android:textColor="#CC0000"        

        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

The result screen looking like this:

For Spinner I have to create an array in string.XML file.

string.XML

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

<resources>

    <string name="app_name">Introduce Layout</string>

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

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

    

    <string-array name="ageGroup">

<item>0 to 10</item>

<item>11 to 18</item>

<item>19 to 25</item>

<item>26 to 40</item>

<item>40 to 60</item>

<item>Above 60</item>

</string-array>

</resources>

The yellow portion I have created .

java source code LayoutInterface.java

LayoutInterface.java

package com.blogspot.mukherjee.satyaki.introducelayout;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.*;

import android.widget.CompoundButton.OnCheckedChangeListener;

public class LayoutInterface extends Activity {

EditText fullName;

RadioGroup genderGroup;

RadioButton genderButton;

Spinner ageScroll;

CheckBox chkCricket,chkFootball;

Button submit;

TextView result;

String gender="";

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_layout_interface);

        

        fullName   =(EditText) findViewById(R.id.editTextName) ;

        genderGroup=(RadioGroup) findViewById(R.id.radioGroup1);

        ageScroll  =(Spinner) findViewById(R.id.spinner1)      ;

        chkCricket =(CheckBox) findViewById(R.id.checkBox1)    ;

        chkFootball=(CheckBox) findViewById(R.id.checkBox2)    ;

        result     =(TextView) findViewById(R.id.result)       ;

        submit   =(Button) findViewById(R.id.button1)   ;

        

        /* Work with RadioButton */

        genderGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

        /**

             * Called when the RadioButton is selected

             */

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

// TODO Auto-generated method stub

genderButton=(RadioButton) findViewById(checkedId);

// This puts the value (true/false) into the variable

       boolean isChecked = genderButton.isChecked();

       

if(isChecked)

{

gender=genderButton.getText().toString().trim();

Toast.makeText(getApplicationContext(), ""+genderButton.getText().toString().trim(), Toast.LENGTH_SHORT).show();

}

}

});

        

        /* Work with CheckBox*/

        chkCricket.setOnCheckedChangeListener(new OnCheckedChangeListener()

        {

        /**

             * Called when the checkbox is selected 

             */

@Override

public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {

// TODO Auto-generated method stub

if(isChecked)

{

Toast.makeText(getApplicationContext(), ""+chkCricket.getText().toString().trim(), Toast.LENGTH_SHORT).show();

}

}

       

        });

        

        /* Work with CheckBox*/

        chkFootball.setOnCheckedChangeListener(new OnCheckedChangeListener()

        {

        /**

             * Called when the checkbox is selected 

             */

@Override

public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {

// TODO Auto-generated method stub

if(isChecked)

{

Toast.makeText(getApplicationContext(), ""+chkFootball.getText().toString().trim(), Toast.LENGTH_SHORT).show();

}

}

       

        });

        

        /* Work with Spinner*/

        ageScroll.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            /**

             * Called when a new item is selected (in the Spinner)

             */

             public void onItemSelected(AdapterView<?> parent, View view, 

                        int pos, long id) {

                    // An spinnerItem was selected. You can retrieve the selected item using

                    // parent.getItemAtPosition(pos)

                    Toast.makeText(getApplicationContext(), ""+ageScroll.getSelectedItem().toString().trim(),Toast.LENGTH_SHORT).show();

                }

                public void onNothingSelected(AdapterView<?> parent) {

                    // Do nothing, just another required interface callback

                Toast.makeText(getApplicationContext(), "You are not selected any value",Toast.LENGTH_SHORT).show();

                }

        }); 

        

        submit.setOnClickListener(new OnClickListener()

        {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

String name=fullName.getText().toString().trim();

/*int genderID=genderGroup.getCheckedRadioButtonId();

genderButton=(RadioButton) findViewById(genderID);

String gender=genderButton.getText().toString().trim();*/

String age=ageScroll.getSelectedItem().toString().trim();

String hobby="";

if(chkCricket.isChecked() && chkFootball.isChecked())

{

hobby="Cricket and Football";

}

else if(chkCricket.isChecked())

{

if(!chkFootball.isChecked())

hobby="Cricket";

}

else if(chkFootball.isChecked())

{

if(!chkCricket.isChecked())

hobby="Football";

}

else{

hobby="Please select your hobby..";;

}

result.setText("Name:: "+name+" ; Gender:: "+gender+" ; Age:: "+age+" ; Hobby:: "+hobby);

Toast.makeText(getApplicationContext(), "Name:: "+name+" ; Gender:: "+gender+" ; Age:: "+age+" ; Hobby:: "+hobby, Toast.LENGTH_LONG).show();

}

       

        });

    }

    

}

Output screen::

If you have any query and face any problem, then you can also contact with me .

Thanks,

 

We know "Hello World" in C . Let's start with "Hello Android" in Android

We know that "Hello World" is the first program written in C language . Generally we started our programming skills with this program. So, here I write "Hello Android" programming in Android .One of the simplest program in Android.

So, how to start Android programming in Eclipse ? Don't worry . It's very simple. Follow the instructions :

1) Go to File -> New -> Project -> Android -> Android Application Project -> Next

After that give the project name, package name in this manner :

then press the "Next" button, and follow the steps one by one.

2) Go to "res"->"layout"->"main.xml"(xml name depend upon user choice) and write this :

activity_main.xml

<RelativeLayout 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"

     >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/tv1"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:textSize="30sp"

        android:textColor="#078FCE"

        android:text="@string/hello_android" />

</RelativeLayout>

3)  Go to "res"->"values"->"string.xml" and edit this :

string.xml

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

<resources>

    <string name="app_name">Hello Android</string>

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

    <string name="hello_android">Hello Android!</string>

</resources>

4) Go to "src"->"package name(here com.blogspot.satyaki.mukherjee.helloandroid)"->"MainActivity.java"(the java file name is also depend upon user choice) and write this java code: 

MainActivity.java


package com.blogspot.satyaki.mukherjee.helloandroid;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {

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

}


The result is :

or ,
You can edit the "TextView" also from java code:


package com.blogspot.satyaki.mukherjee.helloandroid;

import android.os.Bundle;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {

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

textView=(TextView) findViewById(R.id.tv1);

textView.setText("Hello Android ? Hello Satyaki...");
textView.setTextSize(15);
textView.setTextColor(Color.RED);
}

}

The output is:

If you have any query regarding this , then you can freely contact with me.

Thanks.