Clickable compound drawable in EditText that pops a view on click

Nouran H picture Nouran H · Jul 26, 2012 · Viewed 11.3k times · Source

I am using TextWatcher to validate my input and I want my red hint image to be clickable so I can give the user visual feedback as shown in the image below. What I have until now is the edit text with the red hint image appearing when I enter invalid data. I now want to know how to make this red hint clickable and make pop-up hint appear as shown.

EditText hint

This is the code I have so far,

public class MainActivity extends Activity implements TextWatcher{

    EditText username,email = null;
    boolean flag=false;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);      

        username=(EditText) findViewById(R.id.usernametxt);
        email=(EditText) findViewById(R.id.emailtxt);

        username.addTextChangedListener(this);

        username.setOnTouchListener(new View.OnTouchListener(){
        public boolean onTouch(View view, MotionEvent motionEvent) {
            // your code here...
            if(flag)
            {
                email.setText("Error. . .");
            }
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);                
            return false;
            }
        });

        Button loginbtn = (Button) findViewById(R.id.login);
        loginbtn.setOnClickListener(new Button.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub

                //Check Validations
                if(username.getText().toString().equalsIgnoreCase(""))
                {
                    username.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.alert, 0);
                    flag=true;
                }
            }
        });

        Button clearbtn = (Button) findViewById(R.id.clear);
        clearbtn.setOnClickListener(new Button.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub
                username.setText("");
                email.setText("");      
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    public void afterTextChanged(Editable arg0) {
        // TODO Auto-generated method stub

    }

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

    }

    public void onTextChanged(CharSequence s, int start, int before, int count) {
        // TODO Auto-generated method stub      
        username.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
        flag=false;
        email.setText("");
    }   
}

Answer

Ronnie picture Ronnie · Jul 26, 2012

You have to make a custom EditText to get the first feature.

Solved here

The popup view on clicking the drawable can be done with a PopupWindow

Solved here.