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 by introducing a linear interpolation rotation:

res/anim/rotate_forever.xml

<?xml version="1.0" encoding="UTF-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:interpolator="@anim/linear_interpolator"
    android:duration="1200" />

res/layout/main.xml

 <LinearLayout android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:paddingRight="6dip"
      android:paddingLeft="6dip"
      android:orientation="horizontal" 
      android:background="@drawable/header_gradient" >
  <EditText android:id="@+id/search_text"
       android:layout_height="fill_parent"
       android:layout_width="fill_parent"
       android:layout_weight="1"
       android:singleLine="true"
       android:focusable="true" />
  <ImageView android:id="@+id/search_spinner"
      android:gravity="center_vertical|right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/spinner_black"/>
 </LinearLayout>

The way I trigger an animation is programmatically which works, I see the EditView on the left and the ImageView spinning on the right (because I have no idea otherwise)

ImageView searchSpinner = (ImageView) findViewById(R.id.search_spinner);
Animation spinnerAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_forever);
searchSpinner.startAnimation(spinnerAnimation);

My questions are this:

How can I place the ImageView inside the EditText on the far right. So it will appear inside not outside. (I thought I can just place a android:drawableRight, but that didn't work.
How can I hide/show the ImageView (spinner), I tried setting the View's invisibility, by doing searchSpinner.setVisibility(View.INVISIBLE); but that didn't work.

Thanks, if you have any better ideas how to approach this, I am listening :)

score 3 · Answer 1 · answered Sep 14 '10 at 07:28

3

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...

answered Sep 14 '10 at 07:28

Mads Kristiansen

2,604
1
17
15

1

I thought of this - but doesn't this have the effect of putting the image over any text in the EditText ? – Someone Somewhere May 26 '11 at 23:21
You could always control the right padding of the EditText to accommodate the ImageView. – EZDsIt Aug 06 '16 at 13:01

score 2 · Accepted Answer · answered Sep 14 '10 at 06:52

2

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

answered Sep 14 '10 at 06:52

Ian G. Clifton

9,349
2
33
34

Changing LinearLayout to RelativeLayout didn't allow me to stretch the EditText to fill_parent. If I did fill_parent, the ImageButton just wasn't there (EditText spanned the whole thing). I tried rightOf and leftOf, still didn't work. Thanks for your Tip, I ended up adding another RelativeLayout under the LinearLayout so that thee ImageView is relative to the EditText, that allowed me to Linearly stretch that group to the ImageButton. Something like this worked: http://pastebin.com/9FRqJC7y thanks :) – Mohamed Mansour Sep 15 '10 at 01:04

score 0 · Answer 3 · answered May 06 '13 at 06:29

0

This also works

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

answered May 06 '13 at 06:29

Amalan Dhananjayan

2,277
1
34
47

score 0 · Answer 4 · edited May 23 '17 at 12:19

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();
                }
            }
        });

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

4 Answers4

Linked