Arranging radio buttons just below the text and perfectly in center for all android devices

Question

I want to Arrange radio butons just below the text but I am not able to do it. I have used android:layout_marginLeft="20dp" but it works for only particular device not for all.

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/txt1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#ff0000"
        android:gravity="center"
        android:text="red" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="center"
        android:text="green" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#0000ff"
        android:gravity="center"
        android:text="blue" />
</LinearLayout>

<RadioGroup
    android:id="@+id/rg_rgrp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3" >

    <RadioButton
        android:id="@+id/rbtn_red"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/rbtn_green"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/rbtn_blue"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center" />
</RadioGroup>

I have used Gravity and layout_gravity both but it works properly for text not for radio buttons.

I want screen like this compatible for many devices

You have set Orientation to Horizontal. Set it to Vertical. Every thing will be in Linear Order. And Why is RadioGroup out of LinearLayout Tag? — Dhaval, Oct 21 '13 at 09:43
I am sorry. i am not able to upload image. but I want 3 text next to each other and below those 3 texts 3 radio buttons should be there exactly at the centre of the text. and for vertical it will not work at all. and radiogroup is under parent linear layout and the one which is shown in code is for textview. — akshay, Oct 21 '13 at 11:21
Show the image. If you can;t upload here, upload [here](http://postimage.org/) and put a link here.. — SweetWisher ツ, Nov 23 '13 at 10:16
Could you post your full xml file here ? You need support for all android devices . So basically you need support for 3 inch devices till 10 inch devices for all brand and for all dpi as well. So basically you need around 50 or so layouts in vertical as well as landscape layouts. Ok — Rahul Gupta, Nov 27 '13 at 09:59
@Rahul Gupta: No its not necessary to maintain that much as I m using weight property in linear layout so it will work fine for my textviews but I m facing problem in arranging radio buttons. — akshay, Nov 27 '13 at 10:19
Ok. Atleast put the whole xml. I don't know what you have written in the xml above that linear layout as it is not a parent layout. Could you post full xml for this image ? — Rahul Gupta, Nov 27 '13 at 10:40
no I dont need anything above those text, U just use these much code and modify it as you want. and the snapshot I posted here is just for reference. — akshay, Nov 27 '13 at 11:02

score 7 · Accepted Answer · answered Nov 28 '13 at 19:33

Your RadioGroup should look like this. No code required.

<RadioGroup
    android:id="@+id/rg_rgrp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <RadioButton
        android:id="@+id/rbtn_red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="2" />
    <RadioButton
        android:id="@+id/rbtn_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="2" />
    <RadioButton
        android:id="@+id/rbtn_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
</RadioGroup>

score 3 · Answer 2 · answered Nov 29 '13 at 05:12

Here is working Example. Hope it will also work for you.

Activity_main.xml file for layout is as follows :

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

<EditText
    android:id="@+id/et_name"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="names" />

<LinearLayout
    android:id="@+id/ln_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/et_name"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/txt1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#ff0000"
        android:gravity="center"
        android:text="red" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="center"
        android:text="green" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#0000ff"
        android:gravity="center"
        android:text="blue" />
</LinearLayout>

<RadioGroup
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/ln_layout"
    android:orientation="horizontal"
    android:weightSum="3" >

    <com.example.demoradiobutton.RadioButtonCenter
        android:id="@+id/myview"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_weight="1" />

    <com.example.demoradiobutton.RadioButtonCenter
        android:id="@+id/myview1"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_weight="1" />

    <com.example.demoradiobutton.RadioButtonCenter
        android:id="@+id/myview2"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_weight="1" />
</RadioGroup>

MainActivity.java file is as follows:

package com.example.demoradiobutton;

import android.os.Bundle;
import android.app.Activity;
import android.util.AttributeSet;
import android.view.Menu;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.TextView;

public class MainActivity extends Activity {
EditText etName;
RadioButtonCenter rd_btn;
TextView txtBlue,txtGreen,txtRed;
RadioButtonCenter compountBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setVariable();

}

private void setVariable() {
    etName =(EditText) findViewById(R.id.et_name);
    //rd_btn = (RadioButtonCenter)findViewById(R.id.)
    txtBlue = (TextView) findViewById(R.id.txt1);
    txtGreen =(TextView)findViewById(R.id.txt2);
    txtRed = (TextView) findViewById(R.id.txt3);



}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

}

And the RadioButtonCentee.java file is a follows:

package com.example.demoradiobutton;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.RadioButton;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;

public class RadioButtonCenter extends RadioButton {

@SuppressLint("Recycle")
public RadioButtonCenter(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.CompoundButton, 0, 0);
    buttonDrawable = a.getDrawable(1);
    setButtonDrawable(android.R.color.transparent);
}

Drawable buttonDrawable;

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (buttonDrawable != null) {
        buttonDrawable.setState(getDrawableState());
        final int verticalGravity = getGravity()
                & Gravity.VERTICAL_GRAVITY_MASK;
        final int height = buttonDrawable.getIntrinsicHeight();

        int y = 0;

        switch (verticalGravity) {
        case Gravity.BOTTOM:
            y = getHeight() - height;
            break;
        case Gravity.CENTER_VERTICAL:
            y = (getHeight() - height) / 2;
            break;
        }

        int buttonWidth = buttonDrawable.getIntrinsicWidth();
        int buttonLeft = (getWidth() - buttonWidth) / 2;
        buttonDrawable.setBounds(buttonLeft, y, buttonLeft + buttonWidth, y
                + height);
        buttonDrawable.draw(canvas);
    }
}
}

And add attr.xml file in values folder, file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources>    
 <declare-styleable name="CompoundButton">
    <attr name="android:button" />
</declare-styleable>
</resources>

Shivang Trivedi · Answer 3 · 2013-10-21T11:37:30.527

  <RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="" />

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:checked="true"
        android:gravity="center"
        android:text="" />

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="" />

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</RadioGroup>

It works for displaying radio buttons but while selecting radio button other should get unselected and it`s not happening. When H have selected one button it works but it remains selected after selecting other buttons as well. — akshay, Oct 21 '13 at 10:38
@karthikeyan karthik: http://developer.android.com/reference/android/R.styleable.html#LinearLayout_weightSum — akshay, Oct 21 '13 at 11:24
I have added screen shot as well in question. U can check it out. — akshay, Nov 23 '13 at 11:35

Remi · Answer 4 · 2013-11-26T12:57:56.043

Your text aren't equal sizes that's why they don't align! Try to make the texts in the textviews the same size by adding spaces behind them! So the longest word is green and is five letters, add 2 spaces to red and 1 to blue to make them the same length.

otherwise try to put them in a tablelayout!Something like this:

<TableLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_titelLogin"
            android:orientation="horizontal">

            <TableRow 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Text"
                    android:layout_weight="1"/>
                <TextView 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Text"
                    android:layout_weight="1"/>
                <TextView 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Text"
                    android:layout_weight="1"/>

            </TableRow>

            <TableRow 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <RadioGroup 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_weight="1">

                     <RadioButton 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"/>

                    <RadioButton 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"/>

                    <RadioButton 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"/>
                </RadioGroup>
            </TableRow>


        </TableLayout>

hey dude, i don t have any problem with text alignment. I have problem with arranging radio buttons. — akshay, Nov 27 '13 at 05:54
Yes I saw, stupid me :P. But i tried to align the RadioButtons and can't figure out how to. The buttons don't respond to gravity = "center" and that's the way they are supposed to work! So sorry I got no solution — Remi, Nov 27 '13 at 09:26
I think I found a solution to your problem! Check out this link: [link]http://stackoverflow.com/questions/4407553/android-radiobutton-button-drawable-gravity — Remi, Nov 27 '13 at 13:12

score 0 · Answer 5 · answered Nov 28 '13 at 04:16

This will work everywhere,in every screen size,screen density and both orientations. Hope it solves your problem:

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#ff0000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#00ff00" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#0000ff" />
        </LinearLayout>

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" >

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" >

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>

           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" >

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

    </LinearLayout>

No dude. it does not work properly, while dealing with the functionality. Means when clicking it works fine but does not unselect other radio buttons. bdw thanx for attention nd ur help. — akshay, Nov 28 '13 at 04:41
ya may be because of using linear layout in radio group..I will check it n get back to u soon.We can handle it programmatically easily..if u want that?means unchecking other radio buttons when one is clicked. — Rishabh Srivastava, Nov 28 '13 at 05:02

Arranging radio buttons just below the text and perfectly in center for all android devices

5 Answers5