Android: How to place an animated image inside an EditText that we can show and hide

Question

I am trying to add an animated spinner inside a EditText view to the right. And programmatically show/hide it.

I have created the animated spinner b

Answer 1

I'd probably use a FrameLayout and do something like this:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Some text..."
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:src="@drawable/...."
        />
</FrameLayout>

Notice the "layout_gravity" on the ImageView...

Answer 2

This also works

<EditText
    ...     
    android:drawableLeft="@drawable/my_icon" />

Answer 3

If you are using TextInputLayout and want to animate the drawable look into this

First define the animation set like this way in res/anim/

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="200"
     android:interpolator="@android:interpolator/linear"
    >
    <scale
        android:fromXScale="0%"
        android:fromYScale="0%"
        android:toXScale="60%"
        android:toYScale="60%"
        android:pivotX="50%"
        android:pivotY="50%"
        />
    <translate
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:startOffset="100"
        android:fromYDelta="0%"
        android:toYDelta="-80%"/>

</set>

and in your code set the animation

final Animation animation = AnimationUtils.loadAnimation(this, R.anim.anims);
        final ImageView imgLeft = (ImageView) findViewById(R.id.imgLeft);

        final EditText et = (EditText) findViewById(R.id.cardnumEditTexst);
        et.setOnFocusChangeListener(new View.OnFocusChangeListener()
        {
            @Override
            public void onFocusChange(View v, boolean hasFocus)
            {
                if (hasFocus)
                {
                    if (et.getText().length() == 0)
                    {
                        imgLeft.startAnimation(animation);
                    }
                } else
                {
                    if (et.getText().length() == 0)
                        imgLeft.clearAnimation();
                }
            }
        });

Answer 4

With the work that you've already done, I think the easiest answer would be to change your LinearLayout to a RelativeLayout, so that you can set alignParentRight on the ImageView and add paddingRight as needed.

Another option is to create a custom view component: http://developer.android.com/guide/topics/ui/custom-components.html