Geek Answers Handbook

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

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

I created an animated counter by introducing linear rotation of the interpolation:

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 run the animation works programmatically, I see EditView on the left and ImageView on the right (because I have no idea about it)

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

My questions are as follows:

  • How to place an ImageView inside an EditText at the far correctly. So he will appear inside not outside. (I thought I could just host android: drawableRight, but that doesn't work.
  • How can I hide / show ImageView (spinner), I tried to set View invisibility by doing searchSpinner.setVisibility(View.INVISIBLE); but it didn’t work.

Thank you, if you have any better ideas on how to approach this, I'm listening :)

+4
source share
4 answers

With the work that you have already done, I believe that the simplest answer is to change LinearLayout to RelativeLayout so that you can set alignParentRight to 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

+2
source

I would probably use 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>

Note the "layout_gravity" in ImageView ...

+3
source

If you use TextInputLayout and want to animate the reversible look of this

First, define the animation set 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(); } } });
+2
source

It also works

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

More articles:


All Articles