Android: How to Get a Radiogroup with Togglebuttons

Android: How to get a radiogroup with togglebuttons?

I'd just re-use the RadioGroup like so: (please note the onClick attribute,i.e. a button click will trigger your Activity's onToggle(View) method.

<RadioGroup android:id="@+id/toggleGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:orientation="horizontal"
>

<ToggleButton android:id="@+id/btn_Letter"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="14sp"
android:textOn="Letter"
android:textOff="Letter"
android:onClick="onToggle"
android:checked="true"
/>
<ToggleButton android:id="@+id/btn_A4"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="14sp"
android:textOn="A4"
android:textOff="A4"
android:onClick="onToggle"
/>
</RadioGroup>

In your Activity, or some place else, you can define a listener, e.g.

static final RadioGroup.OnCheckedChangeListener ToggleListener = new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(final RadioGroup radioGroup, final int i) {
for (int j = 0; j < radioGroup.getChildCount(); j++) {
final ToggleButton view = (ToggleButton) radioGroup.getChildAt(j);
view.setChecked(view.getId() == i);
}
}
};

and register it, for instance in onCreate():

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.scan_settings);

((RadioGroup) findViewById(R.id.toggleGroup)).setOnCheckedChangeListener(ToggleListener);
}

finally in onToggle(View), you would do whatever needs to happen, specific to your app. and also call the RadioGroup's check method, with the toggled view's id. Like so:

public void onToggle(View view) {
((RadioGroup)view.getParent()).check(view.getId());
// app specific stuff ..
}

Toggle between a RadioGroup of Toggle Buttons

Try with this: I have done same things with Checkbox [ custom checkbox ].

Sample Image

@Override
public void onClick(View view) {

CheckBox cb = (CheckBox) view;

if(cb.isChecked()){

LinearLayout llLayout = (LinearLayout) cb.getParent();

for(int i=0; i<((ViewGroup)llLayout).getChildCount(); ++i) {
View nextChild = ((ViewGroup)llLayout).getChildAt(i);
if(nextChild instanceof CheckBox && nextChild.getId()==cb.getId() ){

}else if (nextChild instanceof CheckBox && nextChild.getId()!=cb.getId() ){

CheckBox cb2=(CheckBox) nextChild;
cb2.setChecked(false);
}
}

} else{
LinearLayout llLayout = (LinearLayout) cb.getParent();

for(int i=0; i<((ViewGroup)llLayout).getChildCount(); ++i) {
View nextChild = ((ViewGroup)llLayout).getChildAt(i);
if(nextChild instanceof CheckBox && nextChild.getId()==cb.getId() ){
CheckBox cb2=(CheckBox) nextChild;
cb2.setChecked(false);
}else if (nextChild instanceof CheckBox && nextChild.getId()!=cb.getId() ){
CheckBox cb2=(CheckBox) nextChild;
cb2.setChecked(false);

}
}
}
}

My XML:

<LinearLayout
android:id="@+id/llShift"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="4"
android:gravity="right"
android:orientation="horizontal" >

<CheckBox
android:id="@+id/cbMorning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/custom_radio_button_morning"
android:paddingBottom="5dp"
android:paddingRight="3dp"
android:paddingTop="5dp" />

<CheckBox
android:id="@+id/cbEvning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/custom_radio_button_evening"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp" />
</LinearLayout>

custom_radio_button_morning.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:drawable="@drawable/morning_chk"
android:state_checked="true"/>
<item
android:drawable="@drawable/morning_unchk"
android:state_checked="false"/>
</selector>

Sample Image

Sample Image

Radiogroup with Togglebuttons not working properly

Finally I figured out how to do it. Thanks Ole, your help led me to this solution.

So this is the working code:

Initializing the buttons and the button group:

tb_one = (ToggleButton) findViewById(R.id.instant_tb_one);
tb_one.setOnClickListener(this);
tb_two = (ToggleButton) findViewById(R.id.instant_tb_two);
tb_two.setOnClickListener(this);
tb_three = (ToggleButton) findViewById(R.id.instant_tb_three);
tb_three.setOnClickListener(this);
tb_four = (ToggleButton) findViewById(R.id.instant_tb_four);
tb_four.setOnClickListener(this);
rg_modes = (RadioGroup) findViewById(R.id.instant_toggleGroup_mode);
rg_modes.setOnCheckedChangeListener(ToggleListener);
rg_modes.clearCheck();
rg_modes.check(tb_one.getId());

The onClick Handler:

if (v == tb_one|| v == tb_two|| v == tb_three|| v == tb_four) {
rg_modes.clearCheck();
rg_modes.check(v.getId());
}

Radiogroup of ToggleButtons inside ArrayAdapter

private int selection = -1;
ViewHolder holder = null;
if(convertView == null){
holder = new ViewHolder()
LayoutInflater inflater = getActivity().getLayoutInflater();
View row = inflater.inflate(R.layout.psip_settings_callquality_listitem, parent, false);
holder.itemTitle = (TextView) row.findViewById(R.id.txtCQViewItem);
holder.itemDesc = (TextView) row.findViewById(R.id.txtCQViewDesc);
holder.itemToggle = (ToggleButton) row.findViewById(R.id.togCQViewItem);
convertView = row;
convertView.setTag(holder);
}else{
holder = (ViewHolder)convertView.getTag();
}

holder.itemToggle.setTag(position);
holder.itemToggle.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton togButton, boolean isChecked) {
if(isChecked && position != selection){
selection = position;
notifyDataSetChnaged();
}else if(!isChecked && position == selection){
selection = -1
}
}
});
holder.itemToggle.setChecked(position == selection);
holder.itemTitle.setText(sSettingTitles.get(position));
holder.itemDesc.setText(sSettingDesc.get(position));
return convertView;

You don't need to create views each and every time since ListView re uses the view. Follow the code as I suggested and let me know it is working or not.

TextView below ToggleButton inside RadioGroup

You can consider using a layout like below instead of add TextView widgets inside RadioGroup with orientation horizontal.

Take a look at this example and see if it is what you are looking for.

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingTop="10dp">

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

<ToggleButton
android:id="@+id/toggleOnlineStatus"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@drawable/add"
android:checked="true"
android:layout_margin="12dp"
android:textOff=""
android:textOn="" />

<ToggleButton
android:id="@+id/toggleAwayStatus"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@drawable/add"
android:layout_margin="12dp"
android:textOff=""
android:textOn="" />

<ToggleButton
android:id="@+id/toggleDNDStatus"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@drawable/add"
android:layout_margin="12dp"
android:textOff=""
android:textOn="" />

<ToggleButton
android:id="@+id/toggleXAStatus"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@drawable/add"
android:layout_margin="12dp"
android:textOff=""
android:textOn="" />

</RadioGroup>

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

<TextView
android:id="@+id/tvOnline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Online" />

<TextView
android:id="@+id/tvAway"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Away" />

<TextView
android:id="@+id/tvDND"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Away" />

<TextView
android:id="@+id/tvXA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Away" />

</LinearLayout>

This display is below.
Sample Image



Related Topics



Leave a reply



Submit