How to translate image across the width of relativelayout in android

Question

I'm trying to animate two images one from left to right and other from right to left all at the same time. For this I have set the left margin for left image equal to negative of its width and same for right image so that they are out of the view. Now in my mainactivity I'm translating them using translationX but nothing is happening.

Here is xml file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    tools:context="com.example.BeX.MainActivity" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="133dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/logo" />

    <ImageView
        android:id="@+id/left"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="-100dp"
        android:src="@drawable/left" />

   <ImageView
       android:id="@+id/right"
       android:layout_width="114dp"
       android:layout_height="75dp"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:layout_marginRight="-114dp"
       android:src="@drawable/right" />

</RelativeLayout>

Here is mainactivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setTheme(R.style.AppBaseTheme1);
         setContentView(R.layout.activity_main);

         RelativeLayout r = (RelativeLayout)findViewById(R.id.rLayout);
         ImageView left = (ImageView)findViewById(R.id.left);
         ImageView right = (ImageView)findViewById(R.id.right);

         left.animate().translationX(r.getWidth()).setDuration(2000);
         right.animate().translationX(-r.getWidth()).setDuration(2000);

    }



}

Please tell me what is the correct or possible way to do that

Thanks in advance

@PraktikSaxena , I've wrote a workable example using your idea. — Vyacheslav, Feb 06 '16 at 15:50

Vyacheslav · Accepted Answer · 2016-02-06T15:49:38.177

There are two base types of Animation in Android.

The first one.

In order to animate translation use this example:

TranslateAnimation r = new TranslateAnimation(0,0,0,200);
r.setDuration(2000L);
r.setRepeatCount(0);
r.setFillAfter(true);
view.startAnimation(r);

The second one.

In your case, you use ViewPropertyAnimator class. This is the second implementation of animation in Android. left.animate().translationX(r.getWidth()).setDuration(2000)

In your case you have setup the Object animator but you haven't started it.

try this: left.animate().translationX(r.getWidth()).setDuration(2000).start() :)

EDIT This have to work:

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@null">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="133dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/aqu" />

    <ImageView
        android:id="@+id/left"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:src="@drawable/ar" />

   <ImageView
       android:id="@+id/right"
       android:layout_width="114dp"
       android:layout_height="75dp"
       android:src="@drawable/ari" />

</RelativeLayout>

Java-file

@Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dat);

        RelativeLayout r = (RelativeLayout)findViewById(R.id.rLayout);
        ImageView left = (ImageView)findViewById(R.id.left);
        ImageView right = (ImageView)findViewById(R.id.right);

        float distance = 300.f;
        TranslateAnimation anim = new TranslateAnimation(0,0,0,distance);
        anim.setFillAfter(true);
        anim.setDuration(12000L);

        left.startAnimation(anim);
    }

But anyway if you want to animate using your ide write this:

ObjectAnimator anim0 = ObjectAnimator.ofFloat(right, "translationX", 0,300);
anim0.setDuration(10000L);
anim0.start();

It really works. I've tested.

according to documentation, Calling start() is optional so I don't think that is the reason that it isn't working. — Pratik Saxena, Feb 06 '16 at 15:31
yeah that is working but when I'm using r.getwidth() instead of specific x value then it isn't working.My guess is that it is 0 since view may not have been created yet so I used this post http://stackoverflow.com/questions/8170915/getheight-returns-0-for-all-android-ui-objects but now app is crashing. — Pratik Saxena, Feb 06 '16 at 17:20
I finally gave specific value to x coordinates and it's working. Btw thanks for your effort. — Pratik Saxena, Feb 06 '16 at 17:39

How to translate image across the width of relativelayout in android

1 Answers1