Botones de radio específicos: la forma más sencilla de configurar diferentes estilos para los botones primero / último

Me gustaría conseguir este tipo específico de botones de radio en mi diseño:

Introduzca aquí la descripción de la imagen

= Gráficos diferentes para el primer elemento, los medios y el último, que tienen diferentes esquinas redondeadas. Puedo imaginar hacer esto con estilos diferentes para los 3 tipos de botones (usando estilos de encargo, drawables stateful).

Estoy implementando esto usando botones de conmutación personalizados. Me gustaría aprovechar el selector desplegable para usar diferentes trazos para el primero y el último, así que utilizo:

<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> 

Pero ahora tengo un problema, que los estados state_first , state_last no se establecen automáticamente en mi LinearLayout , así que tengo que configurar manualmente cada vez que se hace clic en los botones. ¿Hay algún modo, algún diseño, donde estos estados se establecen automáticamente? Gracias por cualquier ayuda.

3 Solutions collect form web for “Botones de radio específicos: la forma más sencilla de configurar diferentes estilos para los botones primero / último”

No encontramos nada especial, así que aquí hay una solución "predeterminada", con botones de conmutación personalizados. Aquí hay 3 estilos diferentes (poner a styles.xml ) para los primeros, los medios y los últimos botones:

 <!-- 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> 

Y un código corto para la actividad que maneja los acontecimientos de los botones del interruptor, tan solamente 1 botón está comprobado en el mismo tiempo, y el botón comprobado está inhabilitado:

 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); } }; } 

Tal vez puede ser útil para alguien …

Debe consultar el proyecto de WordPress Android. Utilizan un "ToggleButton" que da funcionalidad similar. Para el .xml busque aquí . Para descargar la fuente completa, vaya aquí .

No será lo mismo que lo que quieres, ya que sólo tienen botones de conmutación, pero que muy probablemente se puede adaptar a su estilo necesario de botones de radio (si no está ya incorporado).

El proyecto de WordPress Android me ayudó a aprender mucho. Todo desde temas, botones personalizados, diseños personalizados, botones de conmutación, xmlrpc y más.

Introduzca aquí la descripción de la imagen

La manera más simple que encontré para hacer esto es:

1) Extienda la clase RadioButton como sigue:

 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) Cree un archivo XML en "res / drawable / rbtn_selector.xml" agregue debajo del código XML para el fondo del botón de radio.

 <?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) Cree un archivo XML en "res / drawable / rbtn_textcolor_selector.xml" añada el código XML para los botones de radio Color del selector de texto (archivo xml del selector de color de texto)

 <?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) Fije su estilo al botón:

4.1) Agregue mediante programación algún RoundedButton a un exixsting RadioGroup:

 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) Elija sus propios colores y dimensiones el que utilicé en el ejemplo son:

 <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> 

y:

 <dimen name="radio_button_radius">10dp</dimen> <dimen name="radio_button_border">0.7dp</dimen> 
  • Brillante degradado con dibujable androide xml
  • Línea dibujable debajo de textview no mostrando
  • Atributos del tema en pre-lollipop Drawable using DrawableCompat?
  • XML dibujable teniendo un comportamiento diferente en 4.3 y 4.1.2
  • Rectángulo dentro de otro rectángulo
  • Escala Dibujable - ¿setImageLevel determina la escala?
  • Extraño borde negro alrededor de XML extraíble android
  • Problema de representación de Android Drawable (Barra de progreso, Interruptor)
  • ¿Cómo conseguir el efecto de la luz del centro del gradiente del androide?
  • ¿Es posible crear una anchura fija en XML?
  • Forma del androide con el movimiento inferior
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.