Move Imageview Elliptically Around A Center In A Relativeview

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 h

Solution 1:

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

Here is the modified code -

publicclassActivityTestextendsAppCompatActivity {
ImageButton eletron,center;
ArrayList<Ponto> pontos = newArrayList<>();
intcontagem=0;
DemoRelativeLayout rel;
@OverridepublicvoidonCreate(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 ellipsefor(int i=0;i<360;i++) {
        doublex= (200 * Math.cos(i));
        doubley= (400 * Math.sin(i));

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

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

RunnableeletronRunnable=newRunnable() {
    @Overridepublicvoidrun() {
        if (contagem < 360) {
            Pontop= 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);
        }
    }
};

publicclassPonto {

    privatedouble x,y;

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

    publicdoublegetX() {
        return x;
    }

    publicdoublegetY() {
        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 -

publicclassDemoRelativeLayoutextendsRelativeLayout
{
ArrayList<ActivityTest.Ponto> pontos;
float cntrX,cntrY;
publicDemoRelativeLayout(Context context) {
    super(context);
}

publicDemoRelativeLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

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

@OverrideprotectedvoiddispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    if(pontos != null){
        Paintp=newPaint();
        p.setColor(Color.RED);
        for (ActivityTest.Ponto pt : pontos){
            floatx= (float)pt.getX() + cntrX;
            floaty= (float)pt.getY() + cntrY;
            canvas.drawCircle(x,y,5,p);
        }

    }

}

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

I hope this is all you want..