mytechead

Android & Wordpress Help center

Create iOS like clearTextButton in Android

Hey Guys… I just came across a scenario where i had to code to create an iOS like clearTextButton, so just thought sharing it up with you all.
So here it goes…

Features:

  • With this it’ll be possible to hide the clearTextButton when nothing has been typed.
  • When user types even a single character clearTextButton appears
  • When user clicks clearTextButton the contents of Text field is cleared and clearTextButton vanishes

Create a layoout file in your android layout folder and call name it lets say “clear_text_button_Demo.xml”

Now to create an iOS like clearTextButton we’ll be using a RelativeLayout, the reason why RelativeLayout will be used is we’ll be placing the clearTextButton on the EditText field. so as to give an impression that the clearTextButton is a part of EditText field. Something like this will be the output:

clearEditTextButtonDemo

clear_text_button_Demo.xml:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >

<RelativeLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”46dp”
android:orientation=”horizontal” >

<EditText
android:id=”@+id/queryBox”
android:layout_width=”255dp”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentRight=”true”
android:layout_weight=”1.56″ android:singleLine=”true”/>

<ImageView
android:id=”@+id/clearButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_centerVertical=”true”
android:src=”@drawable/cross” android:layout_marginRight=”10dp” android:visibility=”false” />

</RelativeLayout>

</LinearLayout>

Now here id of our EditText is queryBox & id of our Image view is clearButton. Now we have to add handlers in our “activity” to clear the contents of EditText when clearButton is pressed.

Activity:

public class HelloAndroidActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test_clearable_edit_text);
clearTextListener();
}

private void clearTextListener() {

EditText searchEditText = (EditText) findViewById(R.id.query_box);

final ImageView clearButtonImage = (ImageView) findViewById(R.id.clearButton);

clearButtonImage.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

searchEditText.setText(“”);
clearButtonImage.setVisibility(View.GONE);

}

});

searchEditText.addTextChangedListener(new TextWatcher() {

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {

if(s.length() 0){
clearButtonImage.setVisibility(View.VISIBLE);

}

}

@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// TODO Auto-generated method stub

}

@Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub

}
});

}
}

Advertisements

Single Post Navigation

One thought on “Create iOS like clearTextButton in Android

  1. Nice tutorial… Very nice explanation…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: