Text Fields for Android™

 

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

Download UI elements for Android.

 

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.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>

Android is a trademark of Google Inc.