Tutorial on Android Views - Part 1

On my previous articles, we had a discussion on the android's definition and layout. I assume that you have already learn basics on manipulating android layout. In this and on the next article, we will be exploring and dealing more on the various types of commonly used views such as TextView, EditText, Button, ImageButton, CheckBox and ToggleButton. Those widgets are likely the most commonly used in developing android applications.

Lets begin by creating a new project on eclipse:

After which, create an Android XML under res/layout and name it basicviews.xml having written inside is the following code below:
<?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="wrap_content"
  android:orientation="vertical"
  >
 
  <TextView
      android:text="Welcome to Android!"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
  />
 
  <EditText
      android:id="@+id/sampleText"
      android:text=""
      android:layout_height="wrap_content"
      android:layout_width="fill_parent"
  />
 
  <Button
      android:id="@+id/popupSampleText"
      android:text="Pop up"
      android:layout_height="wrap_content"
      android:layout_width="fill_parent"
  />
</LinearLayout>

The code above contains basic views such as textview, edittext and button supplied with an id. The views id will be used later and discussed further in this discussion. We are doing this layout so we will be able to play around with those views. Below is a little description on those view types.

• TextView - is basically an element that is used to display text on screen or to the user. It is one of the most basic views and most commonly used in developing an android application. Also, do take note that the text inside this view type is not editable.
• EditText - is another type of view that is used for character/text input such as name or passwords.
• Button - it represents a push-button widget which can be pushed or clicked by the user to perform an activity, an event or an action.

Going back to views, its id must always start  with "@+id/" specifier followed by a meaningful view name. So, the next step is we want to use or utilize the following views. Lets edit BasicViewsPractice.java by making its code look like below:

package com.app.techie;

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

public class BasicViewsPractice extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.basicviews);
       
        Button popUp = (Button) findViewById(R.id.popupSampleText);
        popUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TextView sampleText = (TextView) findViewById(R.id.sampleText);
               
                if(0 != sampleText.getText().toString().length()){
                    Toast.makeText(getBaseContext(), sampleText.getText().toString(), Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(getBaseContext(), "The textbox is empty!", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

In the code above, instead of using the main.xml layout, we replace it with basicviews.xml layout on setContentView(...) method to load the layout we just did a while ago. We also instantiated a button as well as a editview. Those views are linked to the corresponding element with the exact id on the xml layout. Moreover, we also added an onClickListener () to the button so whenever the user clicks on it, the text inside the edittext will display on screen through Toast. Try running the application and it should look like this:

There you go! Your application should be similar to above. If the edittext is empty, it should display "textbox is empty" as a message. Moving forward, add the code below on basicviews.xml just right after popupButton view.
<EditText
      android:id="@+id/sampleTextPassword"
      android:text="sample"
      android:password="true"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  />
 
  <ImageButton
      android:id="@+id/sampleImageButton"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:src="@drawable/icon"
  />

The code added two new views. The edittext character will be replaced with a dot since we set its password attribute to true. The imagebutton is similar to a normal button view. Only that image button has an attribute where you can specify an icon to display wrap inside a button.

Lets do another update by adding the following code:
<CheckBox android:id="@+id/chkSample"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Checkbox Sample"
  />
 
  <CheckBox android:id="@+id/chkStarLook"
    style="?android:attr/starStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Star checkbox"
  />

On the code, the first checkbox will look normal with a square and the second one will appear like a star since we provided a starStyle to its attribute. A checkbox is another special type of button. It has two state and its default is unchecked, otherwise its checked. For us to be able to try out checkbox view state, lets update BasicViewsPractice.java by adding the following code below:

CheckBox chkSample = (CheckBox) findViewById(R.id.chkSample);
        chkSample.setOnClickListener(new View.OnClickListener() {
           
            @Override
            public void onClick(View v) {
                if(((CheckBox) v).isChecked()){
                    Toast.makeText(getBaseContext(), "Checked", Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(getBaseContext(), "Unchecked", Toast.LENGTH_SHORT).show();
                }
            }
        });

That suffice how you are going to verify a chechbox view state using java code. That same code also applies to the star checkbox. Just change the id of the checkbox on your java code. Try running the code and you should be able to see something like below.

Another view that behaves like CheckBox is the ToggleButton. It has two state, checked and unchecked, just like a CheckBox view. Only that this time, it has a light indicator to display its current state. Try it out by adding a togglebutton on basicviews.xml.
<ToggleButton android:id="@+id/tglSample"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Light switch"
/>

To be able to check its current state, add the following code below on the BasicViewsPractice.java.
ToggleButton tglSample = (ToggleButton) findViewById(R.id.tglSample);
        tglSample.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(((ToggleButton) v).isChecked()){
                    Toast.makeText(getBaseContext(), "Light On", Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(getBaseContext(), "Light Off", Toast.LENGTH_SHORT).show();
                }
            }
        });


As you can see above, its more or less like the code on checking a checkbox view. Try running the code and see for yourself.

Nutshell:

In this tutorial we were able to learn and experiment on textView, edittext, button, imagebutton, checkbox and toggle button. However, there are still more views to learn and they will be discussed in detail my next article. Hope you learned from this article. Enjoy!