I need your help to solve my layout problem.. I have 4 RadioButtons, they appear as usual in this scheme:
O text1 O text2 O text3 O text4
where O is the button.. I would know if it's possible to change this layout in this way:
O O O O
text1 text2 text3 text4
This is the solution to set the Text below RadioButtons:
This code android:drawablePadding="-20dp" is not needed.
You add your own selector drawable here: android:drawableTop="@drawable/your_Image_Here".
<RadioGroup
android:id="@+id/RadioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/Icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:button="@android:color/transparent"
android:checked="true"
android:drawablePadding="-20dp"
android:drawableTop="@drawable/your_Image_Here"
android:gravity="center"
android:text="@string/your_Text_Here"
android:textColor="@color/icons_color" />
<RadioButton
android:id="@+id/Icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:button="@android:color/transparent"
android:drawablePadding="-20dp"
android:drawableTop="@drawable/your_Image_Here"
android:gravity="center"
android:text="@string/your_Text_Here"
android:textColor="@color/icons_color" />
</RadioGroup>
I don't think the plain RadioButton widget can do that by default. You'll need to do one of a few things to achieve that effect. You can create your own RadioButton view class by combining a RadioButton and a TextView so that you have complete control over where the items are in relation to each other. Or you can skip making it a view and just use two elements in your layout, 1 TextView and one RadioButton(with no text set to it).
Simpler solution with default RadioButton:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="@+id/radio7"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tvDays7"
android:text="7 looong days"
android:layout_centerHorizontal="true"
android:layout_below="@id/radio7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
In the XML file:
<!--...-->
<RadioGroup
android:checkedButton="@+id/radioButton1"
android:id="@+id/radioGroupBase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:id="@+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<RadioButton
android:clickable="false"
android:focusable="false"
android:id="@+id/radioButton1"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent" />
<TextView
android:clickable="false"
android:focusable="false"
android:id="@+id/textView1"
android:text="@string/textView1_Text"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent" />
</LinearLayout>
<LinearLayout
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:id="@+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<RadioButton
android:clickable="false"
android:focusable="false"
android:id="@+id/radioButton2"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent" />
<TextView
android:clickable="false"
android:focusable="false"
android:id="@+id/textView2"
android:text="@string/textView2_Text"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent" />
</LinearLayout>
<!--more RadioButtons-->
</RadioGroup>
<!--...-->
Set up onClick() listeners for the LinearLayouts (not for RadioButtons) in the onCreate() procedure (don't forget to import android.view.View; and import android.widget.RadioGroup;):
//...
findViewById(R.id.linearLayout1).setOnClickListener(new View.OnClickListener()
{
public void onClick(final View objView)
{
((RadioGroup) findViewById(R.id.radioGroupBase)).check(findViewById(R.id.radioButton1).getId());
}
});
findViewById(R.id.linearLayout2).setOnClickListener(new View.OnClickListener()
{
public void onClick(final View objView)
{
((RadioGroup) findViewById(R.id.radioGroupBase)).check(findViewById(R.id.radioButton2).getId());
}
});
//more SetOnClickListener() calls for more LinearLayouts ("RadioButtons")
//...
All that's left is to set up an onCheckedChanged() listener for the RadioGroup in the same onCreate() procedure:
//...
((RadioGroup) findViewById(R.id.radioGroupBase)).setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
{
public void onCheckedChanged(final RadioGroup objRadioGroup, final int nCheckedID)
{
if (!objRadioGroup.isShown())
return;
//do something depending on which RadioButton was checked
}
});
//...
It might be a good idea to make a simple getter for the RadioGroup and maybe for the LinearLayouts as well (the latter would require import android.widget.LinearLayout;):
//...
private RadioGroup Get_radioGroupBase() { return findViewById(R.id.radioGroupBase); }
private LinearLayout Get_linearLayout1() { return findViewById(R.id.linearLayout1); }
private LinearLayout Get_linearLayout2() { return findViewById(R.id.linearLayout2); }
//more getters for more LinearLayouts ("RadioButtons")
//...
For now, radio button text positioning can easily be adjusted with MaterialRadioButton.
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/rbThemeLight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:drawableTop="@drawable/rb_selector"
android:drawablePadding="4dp"
android:gravity="center"
android:padding="6dp"
android:text="@string/settings_theme_light" />
A few notes here:
android:button="@null" you disable the default radio button drawable.android:drawableTop
There are other options available, sich as drawableTop, drawableEnd etc.For the drawable you may use something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
<item android:state_checked="true">
<shape android:shape="oval">
<stroke android:width="5dp" android:color="@color/colorWs" />
<size android:width="20dp" android:height="20dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:width="1.5dp" android:color="@color/colorClay" />
<size android:width="20dp" android:height="20dp" />
</shape>
</item>
</selector>
It works either with and without a RadioGroup.
