In Android studio, how to place 4 circle views at equi distance from each other percentage wise (linear or relative layout)

Question

In Android studio, I want to place 4 circle views at equi distance from each other percentage wise (linear or relative layout), so that distance from each other and left wall and right wall, all will be 20% kind of. Please help me to get that code (Java project). Thank you very much.

I couldn't get proper code for that unfortunately.

Answer 1

You can do it with circle.xml. Put it to @drawable/circle shape of button background.

Main.xml (res/layout)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical|center_horizontal">

    <Button
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/circle"
        android:text="1"/>

    <Button
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:text="2"
        android:background="@drawable/circle"
        android:layout_marginLeft="20dp"/>

    <Button
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:text="3"
        android:background="@drawable/circle"
        android:layout_marginLeft="20dp"/>

    <Button
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:text="4"
        android:background="@drawable/circle"
        android:layout_marginLeft="20dp"/>

</LinearLayout>

circle.xnl (res/drawable)

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="40dp" android:width="40dp"/>
<solid android:color="#7C66F9" />
<corners android:radius="20dp"/>

You can edit layout_marginLeft for button 2, 3, and 4. To do adjustment.

Answer 2

I continue here. You can do adjusting left margin for relative layout programmatically.

public void doAdjust(View v){
    LinearLayout mainlayout = (LinearLayout)findViewById(R.id.linearLayout1);
    RelativeLayout rl1 = (RelativeLayout)findViewById(R.id.rl1);

    int layoutWidth = mainlayout.getWidth();
    //Toast.makeText(getApplicationContext(), "layout width: "+ Math.round(pxToDp(getApplicationContext(), layoutWidth)), Toast.LENGTH_SHORT).show();
    int btnWidth =  rl1.getWidth();
    //float btn_width = dpToPx(getApplicationContext(), 50);
    float distance = (layoutWidth - (btnWidth*4))/5;
    float rdistance = pxToDp(getApplicationContext(),distance);
    
    //Toast.makeText(getApplicationContext(), "distance: "+ Math.round(pxToDp(getApplicationContext(), distance)), Toast.LENGTH_SHORT).show();

    LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams( Math.round(dpToPx(getApplicationContext(), 50)), Math.round(dpToPx(getApplicationContext(), 50)));
    params2.leftMargin = Math.round(distance);
    RelativeLayout rl2 = (RelativeLayout)findViewById(R.id.rl2);
    rl2.setLayoutParams(params2);
    
    LinearLayout.LayoutParams params3 = new LinearLayout.LayoutParams( Math.round(dpToPx(getApplicationContext(), 50)), Math.round(dpToPx(getApplicationContext(), 50)));
    params3.leftMargin = Math.round(distance);
    RelativeLayout rl3 = (RelativeLayout)findViewById(R.id.rl3);
    rl3.setLayoutParams(params3);
    
    LinearLayout.LayoutParams params4 = new LinearLayout.LayoutParams( Math.round(dpToPx(getApplicationContext(), 50)), Math.round(dpToPx(getApplicationContext(), 50)));
    params4.leftMargin = Math.round(distance);
    RelativeLayout rl4 = (RelativeLayout)findViewById(R.id.rl4);
    rl4.setLayoutParams(params4);
}

public static float spToPx(Context ctx,float sp){
    return sp * ctx.getResources().getDisplayMetrics().scaledDensity;
}

public static float pxToDp(final Context context, final float px) {
    return px / context.getResources().getDisplayMetrics().density;
}

public static float dpToPx(final Context context, final float dp) {
    return dp * context.getResources().getDisplayMetrics().density;
}

Main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        style="?android:attr/buttonStyleSmall"
        android:layout_height="wrap_content"
        android:text="do Adjust"
        android:onClick="doAdjust"
        android:layout_marginTop="15dp"/>

    <LinearLayout
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:layout_marginTop="63dp"
        android:gravity="center"
        android:id="@+id/linearLayout1">

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/circle2"
            android:id="@+id/rl1"/>

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="24dp"
            android:id="@+id/rl2"
            android:background="@drawable/circle2"/>

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="24dp"
            android:id="@+id/rl3"
            android:background="@drawable/circle2"/>

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="24dp"
            android:id="@+id/rl4"
            android:background="@drawable/circle2"/>

    </LinearLayout>

</RelativeLayout></LinearLayout>

app screenshot