Android Radio Group alignment over buttons in relative layout

Question

I am unable to position my radio group over a button. It goes back of the button in relative layout. What I want is a radio group over a button. I have added the output of the code. What I want is to bring the radio group over the 2 buttons. Can anyone help me with this UI issue?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
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="match_parent"
android:layout_height="match_parent"
android:focusable="true"
tools:context=".MainActivity">

<Button
    android:id="@+id/buttonBelow"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    android:background="#f00"
    android:text="Button Below" />

<Button
    android:id="@+id/buttonAbove"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:background="#ff0"
    android:text="Button Above" />


<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#00f">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Male" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Female" />

</RadioGroup>


</RelativeLayout>

It would be good if you post image of current output and your expected output. — Rumit Patel, Dec 28 '18 at 07:11
@Zlytherin the current screen shot is same as that in app. I want both the buttons to go back of radio group and radio group in front. — Amit Mishra, Dec 28 '18 at 07:23
@RumitPatel I want radio group in front and both buttons at back — Amit Mishra, Dec 28 '18 at 07:23

Piyush · Answer 1 · 2018-12-28T07:29:20.813

Change your xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="match_parent"
    android:layout_height="match_parent"
    android:focusable="true">


<FrameLayout android:id="@+id/lin" android:layout_width="match_parent" android:layout_height="wrap_content"
             android:orientation="vertical" android:layout_centerInParent="true" android:layout_marginTop="24dp">



    <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center">

        <Button
                android:id="@+id/buttonBelow"
                android:layout_width="300dp"
                android:layout_gravity="center"
                android:layout_height="300dp"
                android:background="#f00"
                android:text="Button Below"/>

        <Button
                android:id="@+id/buttonAbove"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="#ff0"
                android:text="Button Above"/>

    </FrameLayout>

    <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#00f">

        <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Male"/>

        <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Female"/>

    </RadioGroup>


</FrameLayout>

</RelativeLayout>

good try @Piyush but the output is not desired output. I want the radio group over the button, meaning both buttons to go back of radio group and radio group coming over the 2 buttons. — Amit Mishra, Dec 28 '18 at 07:22
@AmitMishra, instead of explaining it everytime, post the image of expected output and current output. — letsintegreat, Dec 28 '18 at 07:25

Rumit Patel · Answer 2 · 2018-12-28T08:00:58.570

From this answer, We need to just elevate RadioGroup by 1dp. No other changes.

It's because of Button has default android:elevation="1dp". so for RadioGroup, we need to set more elevation.

<Button
    android:id="@+id/buttonBelow"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    android:background="#f00"
    android:text="Button Below" />

<Button
    android:id="@+id/buttonAbove"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:background="#ff0"
    android:text="Button Above" />


<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#00f"
    android:elevation="2dp">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Male" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Female" />

</RadioGroup>

score 0 · Answer 3 · answered Dec 28 '18 at 07:42

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <Button
            android:id="@+id/buttonBelow"
            android:layout_width="300dp"
            android:layout_height="300dp"

            android:background="#f00"
            android:text="Button Below"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">
        <Button
            android:id="@+id/buttonAbove"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#ff0"
            android:text="Button Above"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">
        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00f">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Male"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Female"/>

        </RadioGroup>
    </LinearLayout>

</RelativeLayout>

score 0 · Answer 4 · answered Dec 28 '18 at 07:48

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">

    <Button
        android:id="@+id/buttonBelow"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="#f00"
        android:text="Button Below" />

    <Button
        android:id="@+id/buttonAbove"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="#ff0"
        android:text="Button Above" />
</RelativeLayout>

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#00f">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Male" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Female" />

</RadioGroup>

score 0 · Answer 5 · answered Dec 28 '18 at 09:46

Try this

<RelativeLayout 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="match_parent"
android:layout_height="match_parent"
android:focusable="true"
tools:context=".MainActivity">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/buttonBelow"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="#f00"
        android:text="Button Below" />

    <Button
        android:id="@+id/buttonAbove"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="#ff0"
        android:text="Button Above" />
</RelativeLayout>
<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#00f">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Male" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Female" />
</RadioGroup>

Android Radio Group alignment over buttons in relative layout

5 Answers5