CODEWITHSUNDEEP
androidandroid-edittext
Daniel Mendel
Daniel Mendel

Reputation: 506

Android: a "working" image in an edittext

I want to have an image inside an edittext, that will change it's drawable with an animation while the user types, as follows:

enter image description here

enter image description here

Thanks :)

Upvotes: 1

Views: 624

Answers (3)

Veaceslav Gaidarji
Veaceslav Gaidarji

Reputation: 4301

Place EditText and ImageView in RelativeLayout and when you change text, change image

EDIT: added sample code

1) main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
    <EditText
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="New EditText"
            android:id="@+id/editText"/>
    <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:id="@+id/imageView"
            android:background="@drawable/first_image"
            />
</RelativeLayout>

2) MyActivity class

public class MyActivity extends Activity {

    private EditText editText;
    private ImageView image;
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initializeFormViews();
        initializeFormEvents();
    }

    public void initializeFormViews(){
        editText = (EditText) findViewById(R.id.editText);
        image = (ImageView) findViewById(R.id.imageView);
    }

    public void initializeFormEvents(){

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

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

            @Override
            public void afterTextChanged(Editable s) {
                // changes image after editing text in EditText
                image.setBackgroundResource(R.drawable.second_image);
            }
        });

    }
}

Upvotes: 1

stack_ved
stack_ved

Reputation: 721

please use the xml code snippet given below as a part of your main xml file(responsible for UI):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget665"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="left"
    android:paddingLeft="1dip"
    android:paddingRight="2dip">
        <ImageView
            android:id="@+id/searchImageView"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:src="@android:drawable/ic_search_category_default"
            android:layout_gravity="center_vertical"
            android:paddingTop="2dip"
            android:paddingBottom="2dip">
        </ImageView>
            <EditText
            android:id="@+id/search_edit_text"
            android:layout_width="fill_parent"
            android:layout_height="35dip"
            android:text=""
            android:textSize="18sp"
            android:background="#f5f5dc"
            android:layout_gravity="center_vertical">
        </EditText>
</LinearLayout>

place this inner class inside your main activity

public class SearchTextWatcher implements TextWatcher{

    @Override
    public void afterTextChanged(Editable arg0) {

    }

    @Override
    public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
            int arg3) {

    }

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



                if(!prefix.equals("")){
                    changeImageToProcessing();
                }else{
                    changeImageToIdle();
                }




    }

}

extract searchBar (EditText) and iv (ImageView) from your contentView during onCreate(), something like 

searchBar = (EditText)contentView.findViewById(R.id.customer_search_edit_text);
iv = (ImageView)contentView.findViewById(R.id.searchImageView);

attach text changelistenber to the searchbar edittext

    searchBar.addTextChangedListener(searchTextWatcher);

add couple of helper methods who will be responsible to change image accordingly

    public void changeImageToProcessing(){

        iv.setImageResource(resId);// resid is the id of the working image
    }

public void changeImageToIdle(){


    iv.setImageResource(resId);// resid is the id of the idle image
}

//these methods are called from onTextChange() inside SearchTextWatcher class

Upvotes: 1

K_Anas
K_Anas

Reputation: 31466

you just need to set the CompoundDrawables {Right | Left | Top | Bottom} property in the xml

<EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/searchedTxt"
        android:width="200dp"
        android:layout_alignParentRight="true"
        android:drawableLeftt="@android:drawable/ic_menu_search"/>

Upvotes: 1

Related Questions