Sliding animation having multiple views synchronization issue

Question

I am trying to make an animation with two textviews. Both are in a relative layout. The functionality of the animation is left textview will go little bit left and at the same time right textview will also go little bit left. I have tried:

http://nineoldandroids.com/ and default way.

But for both case I am getting a gap during the process. I already put one question but i am not getting any positive reply:

Android slider animation is not synchronized

Nineoldandroids code:

xml file:

 <RelativeLayout  
android:layout_width="match_parent" android:layout_height="wrap_content"  
android:orientation="horizontal"
android:layout_below="@+id/target"
android:layout_marginTop="50dp"> 

<TextView
    android:id="@+id/TextView01"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true"     
    android:background="#f00"
    android:gravity="center"
    android:text="RED"
    android:textColor="#000" />

<Button
        android:id="@+id/TextView02"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_alignBottom="@+id/TextView01"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/TextView01"
        android:background="#0F0"
        android:text="TXT"
        android:visibility="invisible" />
</RelativeLayout>

MainActivity.java:

public class MainActivity extends Activity {
  double counter = 0;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.toggles);
    final View target = findViewById(R.id.target);
    final int duration = 5*1000;
    final int duration1 = 300;

    final View textView1 = findViewById(R.id.TextView01);
    final View textView2 = findViewById(R.id.TextView02);
    textView1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        if (counter == 0) {
          textView2.setVisibility(View.VISIBLE);
          ObjectAnimator.ofFloat(textView1, "translationX", 0, -50).setDuration(duration1).start();
          ObjectAnimator.ofFloat(textView2, "translationX", 100, 0).setDuration(duration1).start();
          counter++;

        }
        else {
          ObjectAnimator.ofFloat(textView1, "translationX", -50,0).setDuration(duration1).start();
          ObjectAnimator.ofFloat(textView2, "translationX", 0,100).setDuration(duration1).start();
          counter--;
        }
      }
    });
  }
}

How can I fix it?

otherwise I am trying to put both textview inside a layout where second textview will be outside the screen and using the animation I will move the whole layout. how can I make the xml like this?

Answer 1

Sorry for misunderstanding your question.

Anyway, your issue is not about time exactly. Both animations have the same duration but the problem is the sizes of the animated regions are different. Logically, moving a longer distance in the same duration will look slower than moving a smaller distance.

For example, to solve your problem, I used the following code in the OnClickListener:

public void onClick(View v) {
    int width =textView2.getWidth();
    if (counter == 0) {
        textView2.setVisibility(View.VISIBLE);
        ObjectAnimator.ofFloat(textView1, "translationX", 0, -1*width).setDuration(duration1).start();
        ObjectAnimator.ofFloat(textView2, "translationX", 1*width, 0).setDuration(duration1).start();
        counter++;

    }
    else {
        ObjectAnimator.ofFloat(textView1, "translationX", -1*width, 0).setDuration(duration1).start();
        ObjectAnimator.ofFloat(textView2, "translationX", 0, 1*width).setDuration(duration1).start();
        counter--;
    }
}

Answer 2

Try this

<!-- YOUR CONTAINER -->
<LinearLayout
    android:id="@+id/target"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/target"
    android:layout_marginTop="50dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:background="#f00"
        android:gravity="center"
        android:text="RED"
        android:textColor="#000" />

    <Button
        android:id="@+id/TextView02"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_alignBottom="@+id/TextView01"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/TextView01"
        android:background="#0F0"
        android:text="TXT"
        android:visibility="invisible" />
</LinearLayout>

Then use a ViewPropertyAnimator like this (if you can use it)

//Translate your view -50 to the left. 
yourLinearLayout.animate().translationX(-50).setDuration(1000);

With the ObjectAnimator I achieved the same results by using this code

    Button textView02 = (Button) findViewById(R.id.textView02);
    LinearLayout target = (LinearLayout) findViewById(R.id.target);
    int width = textView02.getWidth();

    ObjectAnimator.ofFloat(target, "translationX", 0, -width).setDuration(1000).start();

Hope this helps you