Search code examples
androidandroid-activityandroid-linearlayout

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


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.


Solution

  • 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