Introduction

Text Field UI elements enable users to enter text into an application. There are several types of Text Field UI elements:

Type Description
Simple When more text is entered than the field can display, all characters are shifted to the left and new characters appear on the right. A button appears on the right which when it is clicked, the entered text is cleared.
Editable Text content can be switched from a read-only mode into an editable mode. It contains a descriptive label inside the textbox.
Expanding When entered text reaches the end of the field, the field expands vertically by one line, until it reaches a configurable number of lines.
Search A search icon appears at the beginning of the field

Simple Text Fields

You need to create a new com.att.widgets.lib.edittext.SimpleTextField object and add it to your view or layout.

For creating a simple text-field you have to add the following code:

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

    <com.att.widgets.lib.edittext.SimpleTextField
          android:id="@+id/simpleTextField"
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_below="@id/textFieldAndroid"/>
</RelativeLayout>

Activity

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

import com.att.widgets.lib.edittext.SimpleTextField;

public class SimpleTextFieldActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        SimpleTextField simple = (SimpleTextField) findViewById(R.id.simpleTextField);
    	SimpleTextField disabledSimple = (SimpleTextField) findViewById(R.id.simpleTextField_2);
		SimpleTextField unfocusableSimple = (SimpleTextField) findViewById(R.id.simpleTextField_3);
		disabledSimple.setEnabled(false);
		unfocusableSimple.setFocusable(false);
    }
}

SimpleTextField Full layout code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"  >
	<TextView android:id="@+id/textFieldAndroid" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Simple Text Field."  
		  android:paddingBottom="10dp"/>
	<com.att.widgets.lib.edittext.SimpleTextField
		  android:id="@+id/simpleTextField"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"/>
	<TextView android:id="@+id/textFieldAndroid_2" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/simpleTextField"
		  android:text="This is a disabled Simple Text Field."  
		  android:paddingBottom="10dp"/>
	<com.att.widgets.lib.edittext.SimpleTextField
		  android:id="@+id/simpleTextField_2"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid_2"/>		  
	<TextView android:id="@+id/textFieldAndroid_3" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/simpleTextField_2"
		  android:text="This is an unfocusable Simple Text Field."  
		  android:paddingBottom="10dp"/>
	<com.att.widgets.lib.edittext.SimpleTextField
		  android:id="@+id/simpleTextField_3"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid_3"/>		  
</RelativeLayout>


Creation of Editable Text Fields

You need to create a new com.att.widget.edittext.EditableTextField object and add it to your view or layout.

For creating a editable text-field you have to add the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:att="http://schemas.android.com/apk/res/com.att.editabletextfield"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"  >

<com.att.widgets.lib.edittext.EditableTextField
		  android:id="@+id/editableTextField_1"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  att:label_text_label="Hello !"
		  att:label_text_text="This is an example to demostrate how the Editable Text Field works."
		  /> 
</RelativeLayout> 
	

Here is the Activity code used to disable the text-field

public class EditableTextFieldTest extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        
        EditableTextField editableTextField_1 = (EditableTextField) findViewById(R.id.editableTextField_1);
        editableTextField_1.setLabelText("Hello!");
        editableTextField_1.setText("This is an example to demostrate how the Label Edit Text works.");
        
        EditableTextField editableTextField_2 = (EditableTextField) findViewById(R.id.editableTextField_2);
        editableTextField_2.setLabelText("Hello!");
        editableTextField_2.setText("This is an example to demostrate how the Label Edit Text works in disable mode.");
        editableTextField_2.setEnabled(false);
        
        EditableTextField editableTextField_3 = (EditableTextField) findViewById(R.id.editableTextField_3);
        editableTextField_3.setLabelText("Hello!");
        editableTextField_3.setText("This is an example to demostrate how the Label Edit Text works in disable and not focusable mode.");
        editableTextField_3.setEnabled(false);
        editableTextField_3.setFocusable(false);
        
    }
	
}

EditableTextField Full layout code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:att="http://schemas.android.com/apk/res/com.att.editabletextfield"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"  >
	
	
	<TextView android:id="@+id/textFieldAndroid" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Editable Text Field."  
		  android:paddingBottom="10dp"/>
 	<com.att.widgets.lib.edittext.EditableTextField
		  android:id="@+id/editableTextField_1"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"
		  att:label_text_label="Hello !"
		  att:label_text_text="This is an example to demostrate how the Editable Text Field works."
		  /> 
	<com.att.widgets.lib.edittext.EditableTextField
		  android:id="@+id/editableTextField_2"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@+id/editableTextField_1"
		  att:label_text_label="Hello !"
		  att:label_text_text="This is an example to demostrate how the Editable Text Field works in disable mode."
		  att:label_text_enabled="false"
		  /> 		  
	<com.att.widgets.lib.edittext.EditableTextField
		  android:id="@+id/editableTextField_3"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@+id/editableTextField_2"
		  att:label_text_label="Hello !"
		  att:label_text_text="This is an example to demostrate how the Editable Text Field works in disable mode and not focusable."
		  att:label_text_enabled="false"
		  /> 		  
	
</RelativeLayout>


Expanding Text Fields

You need to create a new com.att.widgets.lib.edittext.ExpandEditText object and add it to your view or layout.


For creating a expanding text-field you have to add the following code:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
	<com.att.widgets.lib.edittext.ExpandingTextField
		  android:id="@+id/expandingTextField_1"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"
		  android:layout_margin="5dip"/>
</RelativeLayout>
	 

ExpandingTextField Full layout code

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" android:layout_height="wrap_content"  >
	<TextView android:id="@+id/textFieldAndroid" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Expanding Text Field."  />

	<com.att.widgets.lib.edittext.ExpandingTextField
		  android:id="@+id/expandingTextField_1"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"
		  android:layout_margin="5dip"/>
	<TextView android:id="@+id/textFieldAndroid_1" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Expanding Text Field Disabled."  
		  android:layout_below="@+id/expandingTextField_1"/>
	<com.att.widgets.lib.edittext.ExpandingTextField
		  android:id="@+id/expandingTextField_2"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@+id/textFieldAndroid_1"
		  android:layout_margin="5dip"/>
	<TextView android:id="@+id/textFieldAndroid_2" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Expanding Text Field Disabled and not focusabled."  
		   android:layout_below="@+id/expandingTextField_2"/>
	<com.att.widgets.lib.edittext.ExpandingTextField
		  android:id="@+id/expandingTextField_3"
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@+id/textFieldAndroid_2"
		  android:layout_margin="5dip"/>
	
</RelativeLayout>


Activity

import com.att.widgets.lib.edittext.ExpandingTextField;

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

public class ExpandingTextFieldActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ((ExpandingTextField)findViewById(R.id.expandingTextField_2)).setEnabled(false);
        ((ExpandingTextField)findViewById(R.id.expandingTextField_3)).setEnabled(false);
        ((ExpandingTextField)findViewById(R.id.expandingTextField_3)).setFocusable(false);
    }
}

Search Text Fields

You need to create a new com.att.widget.edittext.SearchTextField object and add it to your view or layout.

For creating a search text-field you have to add the following code:

 	

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"  >
	<com.att.widgets.lib.edittext.SearchTextField
		  android:id="@+id/searchTextField"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"/> 
</RelativeLayout>
Activity code from screenshot example

This code shows how to add click listeners to the search UI element

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

import com.att.widgets.lib.edittext.SearchTextField;

public class SearchTextFieldActivity extends Activity implements View.OnClickListener{
   
	private SearchTextField search;
	private SearchTextField disabledSearch;
	private SearchTextField unfocusedSearch;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        search = (SearchTextField) findViewById(R.id.searchTextField);
        disabledSearch = (SearchTextField) findViewById(R.id.searchTextField_2);
        unfocusedSearch = (SearchTextField) findViewById(R.id.searchTextField_3);
        disabledSearch.setEnabled(false);
        unfocusedSearch.setFocusable(false);
        search.setOnClickListener(this);
    }


	public void onClick(View v) {
		search.setText("");
		Toast.makeText(this, "Searching content...", Toast.LENGTH_SHORT).show();
	}


}

SearchTextField Full layout code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"  >
	<TextView android:id="@+id/textFieldAndroid" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:text="This is a Search Text Field."  
		  android:paddingBottom="10dp"/>
 	<com.att.widgets.lib.edittext.SearchTextField
		  android:id="@+id/searchTextField"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid"/> 
	<TextView android:id="@+id/textFieldAndroid_2" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/searchTextField"
		  android:text="This is a disabled Search Text Field."  
		  android:paddingBottom="10dp"/>
 	<com.att.widgets.lib.edittext.SearchTextField
		  android:id="@+id/searchTextField_2"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid_2"/> 		  
	<TextView android:id="@+id/textFieldAndroid_3" 
		  android:layout_width="fill_parent" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/searchTextField_2"
		  android:text="This is an unfocused Search Text Field."  
		  android:paddingBottom="10dp"/>
 	<com.att.widgets.lib.edittext.SearchTextField
		  android:id="@+id/searchTextField_3"
		  android:layout_width="wrap_content" 
		  android:layout_height="wrap_content" 
		  android:layout_below="@id/textFieldAndroid_3"/> 		  	  
</RelativeLayout>