Specific radio buttons are the easiest way to set different styles for the first / last buttons

Question

I would like to use this type of radio buttons in my layout:

= different graphs for the first element, the middle and the last, having different rounded corners. I can imagine how this is done with different styles for 3 types of buttons (using custom styles, stateful rendering).

I implement this using custom toggle buttons. I would like to use the drawable selector to use different drawings for the first and last elements, so I use:

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:state_first="true" android:drawable="@drawable/radio_left_act"/> <item android:state_checked="true" android:state_last="true" android:drawable="@drawable/radio_right_act"/> <item android:state_checked="true" android:drawable="@drawable/radio_middle_act"/> <item android:state_checked="false" android:state_first="true" android:drawable="@drawable/radio_left_inact"/> <item android:state_checked="false" android:state_last="true" android:drawable="@drawable/radio_right_inact"/> <item android:state_checked="false" android:drawable="@drawable/radio_middle_inact"/> </selector> 

But now I have a problem that state_first , state_last not set automatically in my LinearLayout , so I have to set them manually every time the buttons are pressed. Is there some way, some kind of layout, where these states are set automatically? Thanks for any help.

Answer 1

Nothing special was found, so this is the default solution with customizable toggle buttons. Here are three different styles (for styles.xml ) for the first, middle, and last buttons:

 <!-- Toggle button styles --> <style name="CustomToggle"> <item name="android:paddingTop">9dp</item> <item name="android:paddingBottom">9dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">0dp</item> <item name="android:layout_weight">1</item> </style> <style name="FirstToggle" parent="@style/CustomToggle"> <item name="android:background">@drawable/radio_first</item> </style> <style name="MiddleToggle" parent="@style/CustomToggle"> <item name="android:background">@drawable/radio_middle</item> </style> <style name="LastToggle" parent="@style/CustomToggle"> <item name="android:background">@drawable/radio_last</item> </style> 

And a short code for activity that controls the events of the toggle buttons, so only one button is checked at the same time, and the Disabled button is disabled:

 public class AktivityActivity extends Activity { ArrayList<ToggleButton> toggle_buttons; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.aktivity); initToggleButtons(); } private void initToggleButtons() { toggle_buttons = new ArrayList<ToggleButton>(); toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_1)); toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_2)); toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_3)); // Listen on all toggle buttons for (ToggleButton toggle_button : toggle_buttons) toggle_button.setOnCheckedChangeListener(check_listener); // Check first toggle button updateToggleButtons(toggle_buttons.get(0)); } // Only one toggle can be checked, and checked button must be disabled private void updateToggleButtons(ToggleButton checked_button) { for (ToggleButton toggle_button : toggle_buttons) { toggle_button.setChecked(toggle_button == checked_button); toggle_button.setEnabled(toggle_button != checked_button); } } // Toggle buttons change listener OnCheckedChangeListener check_listener = new OnCheckedChangeListener() { public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) updateToggleButtons((ToggleButton) buttonView); } }; } 

Maybe this can be useful for someone ...

Answer 2

You should check out the Wordpress Android project. They use "ToggleButton", which gives similar functionality. For .xml, look here . To download the full source, go here .

This is not the same as you want, as they simply switch buttons, but it will most likely be tailored to your desired switch style (if it is not already built-in).

The Wordpress project for Android has helped me learn a lot. Everything from themes, custom buttons, custom layouts, toggle buttons, xmlrpc, etc.

Answer 3

The easiest way I found for this:

1) Extend the RadioButton class as follows:

 import android.content.Context; import android.view.ViewGroup; import android.widget.RadioButton; public class RoundedButton extends RadioButton { private static final int[] STATE_ONLY_ONE = new int[] { android.R.attr.state_first, android.R.attr.state_last, }; private static final int[] STATE_FIRST = new int[] { android.R.attr.state_first }; private static final int[] STATE_LAST = new int[] { android.R.attr.state_last }; public RoundedButton(Context context) { super(context); } @Override protected int[] onCreateDrawableState(int extraSpace) { ViewGroup parent = (ViewGroup) getParent(); if (parent == null) { return super.onCreateDrawableState(extraSpace); } final int size = parent.getChildCount(); final boolean isFirst = (parent.getChildAt(0) == this); final boolean isLast = (parent.getChildAt(size-1) == this); int[] states = super.onCreateDrawableState(extraSpace + 2); if (isFirst && isLast) { mergeDrawableStates(states, STATE_ONLY_ONE); } else if (isFirst) { mergeDrawableStates(states, STATE_FIRST); } else if (isLast) { mergeDrawableStates(states, STATE_LAST); } return states; } } 

2) Create one XML file in "res / drawable / rbtn_selector.xml", add below XML code for Radio Button background.

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- First Checked --> <item android:state_first="true" android:state_checked="true"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_selected_start" android:endColor="@color/radio_button_selected_end" android:type="linear" /> <!--<solid android:color="@android:color/holo_blue_dark" />--> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" /> </shape> </item> <!-- First Unchecked --> <item android:state_first="true" android:state_checked="false"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_unselected_start" android:endColor="@color/radio_button_unselected_end" android:type="linear" /> <!--<solid android:color="@android:color/holo_purple"/>--> <corners android:topLeftRadius="10dp" android:topRightRadius="@dimen/radio_button_radius"/> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" /> </shape> </item> <!-- Last Checked --> <item android:state_last="true" android:state_checked="true"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_selected_start" android:endColor="@color/radio_button_selected_end" android:type="linear" /> <!--<solid android:color="@android:color/holo_green_dark" />--> <corners android:bottomLeftRadius="@dimen/radio_button_radius" android:bottomRightRadius="@dimen/radio_button_radius"/> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" /> </shape> </item> <!-- Last Unchecked --> <item android:state_last="true" android:state_checked="false"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_unselected_start" android:endColor="@color/radio_button_unselected_end" android:type="linear" /> <!--<solid android:color="@android:color/holo_red_dark"/>--> <corners android:bottomLeftRadius="@dimen/radio_button_radius" android:bottomRightRadius="@dimen/radio_button_radius"/> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" /> </shape> </item> <!-- Default Checked --> <item android:state_checked="true"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_selected_start" android:endColor="@color/radio_button_selected_end" android:type="linear" /> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" /> <!--<solid android:color="@android:color/holo_orange_dark" />--> </shape> </item> <!-- Default Unchecked --> <item android:state_checked="false"> <shape> <gradient android:angle="90" android:startColor="@color/radio_button_unselected_start" android:endColor="@color/radio_button_unselected_end" android:type="linear" /> <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" /> <!--<solid android:color="@android:color/holo_green_light"/>--> </shape> </item> </selector> 

3) Create one XML file in "res / drawable / rbtn_textcolor_selector.xml", add below XML code for radio text buttons. The color of the text selector. (Text Color Selector xml file)

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/radio_text_selected"/> <item android:color="@color/radio_text_unselected"/> </selector> 

4) Set the style for the button:

4.1). Programmatically add a RoundedButton to the RadioGroup exixsting group:

 RoundedButton newRadioButton = new RoundedButton(this.getActivity()); if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) { newRadioButton.setBackgroundDrawable(this.getActivity().getResources().getDrawable(R.drawable.rbtn_selector)); } else { newRadioButton.setBackground(this.getActivity().getResources().getDrawable(R.drawable.rbtn_selector)); } newRadioButton.setTextColor(this.getActivity().getResources().getColorStateList(R.color.rbtn_textcolor_selector)); 

4.2) Xml:

 <RoundedButton android:id="@+id/bt_id_1" android:background="@drawable/rbtn_selector" android:textColor="@drawable/rbtn_textcolor_selector" /> 

5) Select your own colors and sizes, which I used in the example:

 <color name="radio_text_selected">#FFF</color> <color name="radio_text_unselected">#222</color> <color name="radio_button_selected_start">#5393c5</color> <color name="radio_button_selected_end">#6facd5</color> <color name="radio_button_unselected_start">#f9f9f9</color> <color name="radio_button_unselected_end">#eee</color> <color name="radio_button_border_selected">#2373a5</color> <color name="radio_button_border_unselected">#aaa</color> 

and

 <dimen name="radio_button_radius">10dp</dimen> <dimen name="radio_button_border">0.7dp</dimen>