Radio button group bad showing in some android devices

Question

please tell me what is my problem in radio button group or radio button xml code? radio button circle get in text in some device like "HTC Sensation". i don't know what is problem. please help me...

this link is picture of HTC Sensation: https://www.dropbox.com/s/7gjvn09kplv5zqf/HTC%20Sensation.jpg?dl=0

and this one is picture of simulator: https://www.dropbox.com/s/tdnpc5vfdf9l1n9/Simulator.png?dl=0

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="@string/dialog_choose_music"
            android:textColor="#ffffff"
            android:textSize="18sp" />

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

            <RadioGroup
                android:id="@+id/selectMusicRadioGroup"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/between_games_timer"
                android:orientation="vertical" >

                <RadioButton
                    android:id="@+id/silent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="3dp"
                    android:background="@drawable/bg_color_selector"
                    android:checked="true"
                    android:ellipsize="end"                        
                    android:tag="silent"
                    android:maxLines="1"
                    android:paddingBottom="15dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="15dp"
                    android:singleLine="true"
                    android:text="@string/silent"
                    android:textColor="#ffffff"
                    android:textSize="16sp" >
                </RadioButton>

                <RadioButton
                    android:id="@+id/myMusic"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="3dp"
                    android:background="@drawable/bg_color_selector"
                    android:ellipsize="end"
                    android:tag="my_music"
                    android:maxLines="1"
                    android:paddingBottom="15dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="15dp"
                    android:singleLine="true"
                    android:text="@string/custom_music"
                    android:textColor="#ffffff"
                    android:textSize="16sp" >
                </RadioButton>
            </RadioGroup>
        </LinearLayout>
</LinearLayout>

Answer 1

On some devices padding on radio buttons and checkboxes is simply not supported. Android uses the padding attribute internally to place the text and the picture so changing the padding yourself messes it up.

Remove the padding and use margin on the containing layout instead.

Answer 2

The "padding" attribute that you used with your RadioButton applies only on the text. Besides, Android treats the RadioButton/CheckBox's circle as a drawable. ( You can see that there are drawableTop, drawableBottom, ... in a radiobutton) .

So, to apply padding on the circle, you should use "drawablePadding" attribute, as follows :

<RadioButton
                android:id="@+id/myMusic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="3dp"
                android:drawablePadding="10dp" />