logo

There are several UI components are exist. We will learn some basic components.

Button

Buttons can be pressed, or clicked, by the user to perform an action.
we can create Button by writing following code:

<Button
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:id="@+id/button"
     android:text="Click to Perform Action"/>

Attach listeners inside your activity “onCreate()” method to perform action,

        ((Button)findViewById(R.id.button)).setOnClickListener(new View.OnClickListener(){
			@Override
			public void onClick(View v) {
				//Perform action here
			}	
		});

TextView, EditText

Write layout file containing EditText with inputType set to to “text“, “number” and “textPassword” for alpha-numeric, numeric and password text respectively. Also add TextView which will be not editable. Default inputType of EditText is “text“.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
 
  <EditText android:id="@+id/edittext01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="Text"/>
    
  <EditText android:id="@+id/edittext02"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:hint="Number"/>
    
    <EditText android:id="@+id/edittext03"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:hint="Text password"/>  
 
</LinearLayout>

Getting Text value of EditText

str=text.getText().toString();
Toast.makeText(UIActivity.this,str, Toast.LENGTH_SHORT).show();

CheckBox

For CheckBox we can have

<CheckBox
        android:id="@+id/chkAnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android" />

and to perform action

CheckBox ChkBx =(CheckBox)findViewById(R.id.chkAnd);
        
        ChkBx.setOnCheckedChangeListener(new OnCheckedChangeListener()
        {
			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				// TODO Auto-generated method stub
				
			} });

RadioGroup and RadioButtons

This class is used to create a multiple-exclusion scope for a set of radio buttons. Checking one radio button that belongs to a radio group unchecks any previously checked radio button within the same group.

Intially, all of the radio buttons are unchecked. While it is not possible to uncheck a particular radio button, the radio group can be cleared to remove the checked state.

The selection is identified by the unique id of the radio button as defined in the XML layout file.

xml file contains:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView android:layout_width="wrap_content" 
	android:layout_height="wrap_content"
	android:text="RadioGroup"/>
	
<RadioGroup android:layout_width="fill_parent"
	android:layout_height="wrap_content" 
	android:orientation="vertical"
	android:id="@+id/radiogroup">

<RadioButton android:id="@+id/radiobutton1"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"
	android:text="radio1" >
</RadioButton>

<RadioButton android:id="@+id/radiobutton2" 
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" 
	android:text="radio2">
</RadioButton>

<RadioButton android:id="@+id/radiobutton3" 
	android:layout_width="wrap_content"
 	android:layout_height="wrap_content" 
 	android:text="radio3">
 </RadioButton>
 
</RadioGroup>
    
</LinearLayout>

Whenever you will select radio button, the related messsage will be displayed
Note: You need to implement RadioGroup.OnCheckedChangeListener in main activity
i.e

package com.mobisys.android.ui_components;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.CompoundButton.OnCheckedChangeListener;

public class UIActivity extends Activity implements
RadioGroup.OnCheckedChangeListener{
    /** Called when the activity is first created. */
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        RadioGroup rg = (RadioGroup) findViewById(R.id.radiogroup);
        rg.setOnCheckedChangeListener(this); 
    }
    
    public void onCheckedChanged(RadioGroup group, int checkedId) {
    	String radioButtonSelected = "";
    	switch (checkedId) {
     
        case R.id.radiobutton1 : radioButtonSelected = "radiobutton1";
                         	              break;
        case R.id.radiobutton2 : radioButtonSelected = "radiobutton2";
      		                      break;
        case R.id.radiobutton3 : radioButtonSelected = "radiobutton3";
      		                      break;
        
        }
    	Toast.makeText(UIActivity.this,radioButtonSelected+" Selected", Toast.LENGTH_SHORT).show();
    }
  }

ImageView

Displays an arbitrary image, such as an icon. The ImageView class can load images from various sources (such as resources or content providers), takes care of computing its measurement from the image so

that it can be used in any layout manager.

Setting image from Resource

Download the following folder and copy the images in res/drawable folder
images

xml contains:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ok" />
 
    <Button
        android:id="@+id/btnChangeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Image" />
 
</LinearLayout>

When we click Button it changes the image as specified in setImageResource().

package com.mobisys.android.ui_components;

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

public class UIActivity extends Activity{
    /** Called when the activity is first created. */
	ImageView image;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((Button)findViewById(R.id.btnChangeImage)).setOnClickListener(new View.OnClickListener(){

			@Override
			public void onClick(View v) {
				
				image = (ImageView) findViewById(R.id.imageView1);
				image.setImageResource(R.drawable.no);
			}
        	
        });
}
}

Setting image from Bitmap

All this below code does is load the image icon.png from sdcard. The BitmapFactory creates a bitmap object with this image and we use the myImage.setImageBitmap() method to update the ImageView component.

You can use the above xml.

And for setting the image using Bitmap you can have

package com.mobisys.android.ui_components;

import java.io.File;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Environment;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class UIActivity extends Activity{
    /** Called when the activity is first created. */
	ImageView image;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((Button)findViewById(R.id.btnChangeImage)).setOnClickListener(new View.OnClickListener(){

			@Override
			public void onClick(View v) {
				File imgFile = new  File(Environment.getExternalStorageDirectory()+"/Images/icon.png");

				if(imgFile.exists()){

				    Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath());

				    ImageView myImage = (ImageView) findViewById(R.id.imageView1);
				    myImage.setImageBitmap(myBitmap);

				}

			}
        	
        });
}
}

Spinner

Spinner is a widget similar to a drop-down list for selecting items.
you’ll create a simple spinner widget that contains a list of planets.

main.xml contains:

?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="10dip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="@string/planet_prompt"
    />
    <Spinner 
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/planet_prompt"
    />
</LinearLayout>

Create a strings.xml file in res/values/ and enter the following:

<string name="planet_prompt">Choose a planet</string>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>

and our java code will look like:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Spinner spinner = (Spinner) findViewById(R.id.spinner);
    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
            this, R.array.planets_array, android.R.layout.simple_spinner_item);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spinner.setAdapter(adapter);
}

output screens:

Toggle Button

Displays checked/unchecked states as a button with a “light” indicator and by default accompanied with the text “ON” or “OFF“.

layout file contains:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
   
<ToggleButton android:id="@+id/togglebutton"
android:layout_width="150px"
android:layout_height="50px"
android:textOn="ON"
android:textOff="OFF" />

</LinearLayout>

and java code will look like:

	public class UIActivity extends Activity
	{
		ToggleButton tb;

		public void onCreate(Bundle savedInstanceState)
		{
				super.onCreate(savedInstanceState);
		        setContentView(R.layout.main);
		       
		        tb = (ToggleButton) findViewById(R.id.togglebutton);
		        tb.setOnCheckedChangeListener(new OnCheckedChangeListener(){

					@Override
					public void onCheckedChanged(CompoundButton button,
							boolean isChecked) {
						
						if(isChecked)
							Toast.makeText(UIActivity.this, "Toggle Button is on", Toast.LENGTH_LONG).show();
						else
							Toast.makeText(UIActivity.this, "Toggle Button is off", Toast.LENGTH_LONG).show();;
					}
		        	
		        });
		    
		
		
		    
	}
	}

Toggle Off:

Toggle On:

AUTHOR: Vikas Hiran
3 Comments
  • Folla

    Thanks for your Tuto , its very interesting ..
    But i’ve a pbl when i’d like to try the Toggle ..i dont know what make in .java .

    Thanks for answering 🙂

    January 27, 2012
  • Hi Folla, Thank you for noticing that and informing us.. we will update that.. But Toggle button also have onCheckedChangeListener like RadioButton have..

    January 27, 2012

Leave a Comment

Your email address will not be published.