Animate view that is outside to the screen

Question

I have a EditText and TextView inside a RelativeLayout.The width of EditText is match-parent and TextView is aligned to the end of the EditText .Now what i want is that when user clicks on the EditText, its width should decrease while animating.The code works fine but the problem is that after decreasing the width i am not able to see the TextView even though its align to the end of EditText

XMl

<RelativeLayout
        android:id="@+id/ll_search"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/tb_explore"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp"
        android:layout_marginTop="07dp"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:focusable="false">

        <RelativeLayout
            android:id="@+id/test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/search_view">


            <AutoCompleteTextView
                android:id="@+id/et_search"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/imageView11"
                android:layout_toStartOf="@+id/imageView11"
                android:background="@android:color/transparent"
                android:hint="Search by vendor name or keyword"
                android:imeOptions="actionGo"
                android:padding="10dp"
                android:singleLine="true"
                android:textSize="@dimen/regular" />
   </RelativeLayout>

        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/test"
            android:gravity="center"
            android:text="Cancel"

            android:visibility="visible" />
    </RelativeLayout>

Code to decrease width while animating

ValueAnimator anim = ValueAnimator.ofInt(llSearch.getMeasuredWidth(), llSearch.getMeasuredWidth() - 200);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                if (Constants.isLoggingEnable) {
                    Logger.logError("Search lenght--", "" + llSearch.getMeasuredWidth());
                    Logger.logError("Lenght", "" + 500);
                    Logger.logError("Value of animation--", "" + (Integer) valueAnimator.getAnimatedValue());

                }


                int val = (Integer) valueAnimator.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams = llSearch.getLayoutParams();
                layoutParams.width = val;
                llSearch.setLayoutParams(layoutParams);




            }
        });
        anim.setDuration(500);
        anim.start();

Answer 1

Here you go-

ValueAnimator anim = ValueAnimator.ofInt(testLayout.getMeasuredWidth(), testLayout.getMeasuredWidth() - 200);
      anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
          int val = (Integer) valueAnimator.getAnimatedValue();
          ViewGroup.LayoutParams layoutParams = testLayout.getLayoutParams();
          layoutParams.width = val;
          testLayout.setLayoutParams(layoutParams);
        }
      });
      anim.setDuration(500);
      anim.start();
    }

where testLayout is testLayout = (RelativeLayout) findViewById(R.id.test);. You should have decreased the width of the test layout. Also the xml is (With very minute changes)-

<RelativeLayout
    android:id="@+id/ll_search"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="05dp"
    android:layout_marginRight="05dp"
    android:layout_marginTop="07dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:focusable="false">

    <RelativeLayout
      android:id="@+id/test"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:background="@color/colorPrimary">


      <AutoCompleteTextView
        android:id="@+id/et_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:hint="Search by vendor name or keyword"
        android:imeOptions="actionGo"
        android:padding="10dp"
        android:singleLine="true"
        android:textSize="12sp"/>
    </RelativeLayout>

    <TextView
      android:id="@+id/tv_cancel"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true"
      android:layout_toEndOf="@+id/test"
      android:layout_toRightOf="@+id/test"
      android:gravity="center"
      android:text="Cancel"
      android:visibility="visible"/>
  </RelativeLayout>