Move ImageView elliptically around a center in a RelativeView

Question

I have a setup in which I have some ImageViews around a center, and when the user clicks a Button, I want the Views to rotate around the center view, in an elliptical way. What I have at current time is an elliptical movement, but the view is rotating in a weird axis, not on the center axis, as required.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.didasko.calculus.maca.TelaAtomo"
>
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tela_atomo_maca_central"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/maca_cinza"
    android:background="@null"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tela_atomo_eletron_0"
    android:src="@drawable/eletron_nao_completado"
    android:background="@null"
    android:layout_marginRight="46dp"
    android:layout_toLeftOf="@+id/tela_atomo_maca_central"
    android:layout_marginBottom="78dp"
    android:layout_above="@+id/tela_atomo_maca_central"/>
</RelativeLayout>

tela_atomo_maca_central is the center element tela_atomo_eletron_0 is the view I want to move elliptically

final ImageButton eletron = (ImageButton) findViewById(R.id.tela_atomo_eletron_0);

    //Getting all points in the ellipse
    for(int i=0;i<360;i++) {
        double x = 46 * Math.cos(i);
        double y = 78 * Math.sin(i);
        Ponto p = new Ponto(x,y);
        pontos.add(p);
    }

    Runnable eletronRunnable = new Runnable() {
        @Override
        public void run() {
            if (contagem < 360) {
                Ponto p = pontos.get(contagem);
                contagem++;
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) eletron.getLayoutParams();
                params.rightMargin = (int)p.getX();
                params.bottomMargin = (int)p.getY();
                eletron.setLayoutParams(params);

                eletron.postDelayed(this,100);
            }else {
                contagem = 0;
                eletron.postDelayed(this,100);
            }
        }
    };

    eletron.postDelayed(eletronRunnable,100);


}


private class Ponto {

    private double x,y;

    public Ponto(double x, double y) {
        this.x = x;
        this.y = y;
    }

    public double getX() {
        return x;
    }

    public double getY() {
        return y;
    }

}

I'm probably making logical mistakes, because I can make it move elliptically, just not where I want.

How can I make the Image move elliptically around the center?

Answer 1

Based on your existing code I made a sample project and here is what I acheived -

Here is the modified code -

public class ActivityTest extends AppCompatActivity {
ImageButton eletron,center;
ArrayList<Ponto> pontos = new ArrayList<>();
int contagem = 0;
DemoRelativeLayout rel;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.so_demo);
    eletron = (ImageButton) findViewById(R.id.tela_atomo_eletron_0);
    center = (ImageButton) findViewById(R.id.tela_atomo_maca_central);
    rel = (DemoRelativeLayout)findViewById(R.id.demo);
    //Getting all points in the ellipse
    for(int i=0;i<360;i++) {
        double x = (200 * Math.cos(i));
        double y = (400 * Math.sin(i));

        Ponto p = new Ponto(x,y);
        pontos.add(p);
    }
    eletron.postDelayed(eletronRunnable,2000);
}

@Override
protected void onStart() {
    super.onStart();
    rel.drawCircle(pontos,center.getX() + center.getWidth()/2,center.getY() + center.getHeight()/2);
    rel.invalidate();
}

Runnable eletronRunnable = new Runnable() {
    @Override
    public void run() {
        if (contagem < 360) {
            Ponto p = pontos.get(contagem);
            contagem++;
            /*RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) eletron.getLayoutParams();
            params.rightMargin = (int)p.getX();
            params.bottomMargin = (int)p.getY();
            eletron.setLayoutParams(params);*/
            eletron.setTranslationX((float) p.getX() + (eletron.getWidth()/2 + center.getWidth()/2));
            eletron.setTranslationY((float)p.getY() + (eletron.getHeight()/2 + center.getHeight()/2));
            eletron.postDelayed(this,100);
        }else {
            contagem = 0;
            eletron.postDelayed(this,100);
        }
    }
};

public class Ponto {

    private double x,y;

    public Ponto(double x, double y) {
        this.x = x;
        this.y = y;
    }

    public double getX() {
        return x;
    }

    public double getY() {
        return y;
    }

}

}

I have also changed the xml file -

<com.wandertails.stackovrflw.DemoRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#ffffff"
android:id="@+id/demo"
>
<ImageButton
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/tela_atomo_maca_central"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:src="#444444"
    android:background="@null"/>
<ImageButton
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/tela_atomo_eletron_0"
    android:src="#880080"
    android:background="@null"
    android:layout_toLeftOf="@+id/tela_atomo_maca_central"
    android:layout_above="@+id/tela_atomo_maca_central"/>
</com.wandertails.stackovrflw.DemoRelativeLayout>

Finally the DemoRelativeLayout if you want to draw the elliptical path -

public class DemoRelativeLayout extends RelativeLayout
{
ArrayList<ActivityTest.Ponto> pontos;
float cntrX,cntrY;
public DemoRelativeLayout(Context context) {
    super(context);
}

public DemoRelativeLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public DemoRelativeLayout(Context context, AttributeSet attrs, intdefStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    if(pontos != null){
        Paint p = new Paint();
        p.setColor(Color.RED);
        for (ActivityTest.Ponto pt : pontos){
            float x = (float)pt.getX() + cntrX;
            float y = (float)pt.getY() + cntrY;
            canvas.drawCircle(x,y,5,p);
        }

    }

}

public void drawCircle(ArrayList<ActivityTest.Ponto> pp,float x,float y){
    cntrX = x;
    cntrY = y;
    pontos = pp;
}
}

I hope this is all you want..