Clickable compound drawable in EditText that pops a view on click

Question

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.

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 1

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.

Answer 2

Its very simple if you use the red hint image as a compound drawable to the right of your EditText usernametxt. Following will do the trick.

EditText username = (EditText) findViewById(R.id.usernametxt);
username.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_UP) {
            if(event.getRawX() >= username.getRight() - username.getTotalPaddingRight()) {
                // your action for drawable click event

             return true;
            }
        }
        return true;
    }
});

If you want for left drawable change the if statement to:

if(event.getRawX() <= username.getTotalPaddingLeft())

Similarly, you can do it for all compound drawables.

username.getTotalPaddingTop()
username.getTotalPaddingBottom()

This method call returns all the padding on that side including any drawables. You can use this even for TextView, Button etc.

Click here for reference from android developer site.