How to align two items of an activity in one row on the left and right edges, respectively?

Question

How can I align a RadioGroup and an ImageButton in an Android activity on the left and right sides respectively? I am to make one row in the top of the display so that in the left there are two radiobuttons and in the right - one imagebutton. I try this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="top"
android:orientation="vertical">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:weightSum="2"
    android:orientation="horizontal">
    <RadioGroup
        android:id="@+id/rgLearnRepeat"
        android:gravity="left"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rbLearn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="24dp"
            android:checked="true"
            android:text="@string/rbLearn_text"
            android:textColorLink="#00BCD4" />

        <RadioButton
            android:id="@+id/rbRepeat"
            android:text="@string/rbRepeat_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="24dp" />
    </RadioGroup>

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="67dp"
        android:onClick="onStatClick"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_learn" />
</LinearLayout>

But all the elements are aligned to the left.

score 0 · Accepted Answer · answered May 18 '23 at 19:40

The issue that you are using wrap_content for the children of LinearLayout which had android:weightSum="2" so you should make width of children RadioGroup and ImageButton "0dp" to have the available width (50%) for each one not the width of the child itself wrap_content which will be variable based on its width

so should be like this as similar example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="top"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:weightSum="2"
    android:orientation="horizontal">
    <RadioGroup
        android:id="@+id/rgLearnRepeat"
        android:gravity="left"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rbLearn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Radio 1"
            android:textColorLink="#00BCD4" />

        <RadioButton
            android:id="@+id/rbRepeat"
            android:text="Radio 2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="0dp"
        android:onClick="onStatClick"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_weight="1"
        app:srcCompat="ic_learn" />
</LinearLayout>

For reference

Thank you! It works, but it needs one important correction: android:weightSum="3" for LinearLayout (not "2") and then android:layout_weight="2" for RadioGroup and android:layout_weight="1" for ImageButton. Without that the ImageButton intercepts with RadioButtons. — AstFreelancer, May 20 '23 at 10:06

score 0 · Answer 2 · answered May 20 '23 at 10:09

I made right my code according to Youssef Wagih's answer and replace weightSum value. So this is a solution:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:weightSum="3"
android:orientation="horizontal">
<RadioGroup
    android:id="@+id/rgLearnRepeat"
    android:gravity="left"
    android:layout_weight="2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/rbLearn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp"
        android:checked="true"
        android:text="@string/rbLearn_text"
        android:textColorLink="#00BCD4" />

    <RadioButton
        android:id="@+id/rbRepeat"
        android:text="@string/rbRepeat_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp" />
</RadioGroup>

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="0dp"
    android:onClick="onStatClick"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    app:srcCompat="@drawable/ic_learn" />

How to align two items of an activity in one row on the left and right edges, respectively?

2 Answers2