ImageButton in EditText

Question

What is the code to make an image button to stay at the top right of an EditText even when scrolled instead of following data input causing a messy appearance?

Answer 1

I would create a custom component, extending RelativeLayout and then apply a custom layout.

Have a look at this article, you can get the desired result with just few edit of this code: https://arunbadole1209.wordpress.com/2011/12/16/how-to-create-edittext-with-crossx-button-at-end-of-it/

clearable_edit_text.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="wrap_content"
    >
    <EditText
        android:id="@+id/clearable_edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingRight="35dip"
        />
    <Button
        android:id="@+id/clearable_button_clear"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_alignParentRight="true"
        android:background="@drawable/image_clear"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dip"/>
</RelativeLayout>

ClearableEditText.java

public class ClearableEditText extends RelativeLayout
{
    LayoutInflater inflater = null;
    EditText edit_text;
    ImageButton btn_clear;
    public ClearableEditText(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
        initViews();
    }
    public ClearableEditText(Context context, AttributeSet attrs)
    {
        super(context, attrs);
// TODO Auto-generated constructor stub
        initViews();
    }
    public ClearableEditText(Context context)
    {
        super(context);
// TODO Auto-generated constructor stub
        initViews();
    }
    void initViews()
    {
        inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.clearable_edit_text, this, true);
        edit_text = (EditText) findViewById(R.id.clearable_edit);
        btn_clear = (ImageButton) findViewById(R.id.clearable_button_clear);
        btn_clear.setVisibility(RelativeLayout.INVISIBLE);
        clearText();
        showHideClearButton();
    }
    void clearText()
    {
        btn_clear.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
// TODO Auto-generated method stub
                edit_text.setText("");
            }
        });
    }
    void showHideClearButton()
    {
        edit_text.addTextChangedListener(new TextWatcher()
        {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count)
            {
// TODO Auto-generated method stub
                if (s.length() > 0)
                    btn_clear.setVisibility(RelativeLayout.VISIBLE);
                else
                    btn_clear.setVisibility(RelativeLayout.INVISIBLE);
            }
            @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
            }
        });
    }
    public Editable getText()
    {
        Editable text = edit_text.getText();
        return text;
    }
}

To use it, declaration:

<com.yourpackage.ClearableEditText
android:layout_width="fill_parent"
android:layout_height="wrap_content" />