Android conmutador personalizado izquierda-derecha drawables

Estoy tratando de crear un conmutador personalizado como este:

Interruptor de género personalizado

Lo que siento que necesito es algo así como una izquierda / derecha dibujable cada uno en un estado verde / blanco, o alternativamente un contorno verde con un dibujable para cuando la elección debe ser seleccionado.

Lo que no entiendo en los mensajes como este es la forma en que todos los dibujados de la muestra proporcionado inclinado a la derecha, y, sin embargo, el botón de encendido se inclina hacia la izquierda.

Estoy intentando con el siguiente "pulgar" dibujable.

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/choice_right"/> <item android:drawable="@drawable/choice_left"/> </selector>

Pero parece cortar los extremos de los tirantes. Si también establezco una pista para algo como esto:

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="1dp" android:color="@color/text_input"/> <corners android:radius="1dp" android:bottomLeftRadius="4.5dp" android:bottomRightRadius="4.5dp" android:topLeftRadius="4.5dp" android:topRightRadius="4.5dp" > </corners> </shape>

Entonces todo lo que tengo es una línea delgada. Por lo tanto, no estoy seguro de qué probar a continuación.

Esto no puede ser con estilo solo, esto necesita implementación de vista personalizada. Eso es mucho código por lo que mi sugerencia para usted sería el uso de bibliotecas de terceros como https://github.com/hoang8f/android-segmented-control Esta biblioteca está probado y probado por lo que es seguro utilizarlo en lugar de volver a escribirlo.

He creado una aplicación de ejemplo que puede encontrar aquí que debe resolver su problema. Puede echar un vistazo a esta biblioteca que tiene una implementación adecuada del control de segmento.

Básicamente creé un control personalizado que extiende LinearLayout con un weightSum defecto de 2. Dos Buttons se añaden con un weight de 1 y se aplica una lógica para alternar entre ellos. Al activar un evento personalizado se dispara que se construye en esta interfaz.

 public interface SwitchToggleListener { void onSwitchToggle(SwitchToggleState switchToggleState); }

Utilicé los recursos drawable para diseñar los botones.

El resultado final se parecía a esto

Introduzca aquí la descripción de la imagen

Puede utilizar RadioGroup con dos RadioButton:

 <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="horizontal"> <RadioButton android:id="@+id/male_radio_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@drawable/selector_radio_btn_text" android:background="@drawable/selector_radio_btn_left_bg" android:gravity="center" android:button="@null" android:text="@string/male_radio_text" /> <RadioButton android:id="@+id/female_radio_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@drawable/selector_radio_btn_text" android:background="@drawable/selector_radio_btn_right_bg" android:gravity="center" android:button="@null" android:text="@string/female_radio_text"/> </RadioGroup>

Donde selector_radio_btn_text.xml es 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/checkbox_text_color_checked"/> <item android:state_checked="false" android:color="@color/checkbox_text_color"/>

Y selector_radio_btn_left_bg (derecha bg) .xml es backgorund de lado izquierdo y derecho

En lugar de usar cualquier librería externa o biblioteca de soporte, esto se puede hacer fácilmente usando RadioGroup y botones de radio. Como "Dimitry" ha mencionado en su respuesta yo también he utilizado lo mismo para lograr. Aquí está la copia pegada de mi respuesta dada para la pregunta ¿Cómo cambiar el botón de costumbre?

  <RadioGroup android:checkedButton="@+id/offer" android:id="@+id/toggle" android:layout_width="match_parent" android:layout_height="30dp" android:layout_marginBottom="@dimen/margin_medium" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:layout_marginTop="@dimen/margin_medium" android:background="@drawable/pink_out_line" android:orientation="horizontal"> <RadioButton android:layout_marginTop="1dp" android:layout_marginBottom="1dp" android:layout_marginLeft="1dp" android:id="@+id/search" android:background="@drawable/toggle_widget_background" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:gravity="center" android:text="Search" android:textColor="@color/white" /> <RadioButton android:layout_marginRight="1dp" android:layout_marginTop="1dp" android:layout_marginBottom="1dp" android:id="@+id/offer" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/toggle_widget_background" android:button="@null" android:gravity="center" android:text="Offers" android:textColor="@color/white" /> </RadioGroup>

Pink_out_line.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="2dp" /> <solid android:color="#80000000" /> <stroke android:width="1dp" android:color="@color/pink" /> </shape>

Toggle_widget_background.xml

  <?xml version="1.0" encoding="UTF-8" standalone="no"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/pink" android:state_checked="true" /> <item android:drawable="@color/dark_pink" android:state_pressed="true" /> <item android:drawable="@color/transparent" /> </selector>

Actualizar respuesta

Para hacer esto usted debe crear la lista de capas en la carpeta dibujable

Res / drawable / toggle_layerlist.xml

  <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/choice_right"> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="1dp" android:color="@color/text_input"/> <corners android:radius="1dp" android:bottomLeftRadius="4.5dp" android:bottomRightRadius="4.5dp" android:topLeftRadius="4.5dp" android:topRightRadius="4.5dp" > </corners> </shape> </item> </layer-list>

Añadir lista de capas a su selector

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/toggle_layerlist" android:state_checked="true" /> </selector>

Utilice este selector como fondo, pero asegúrese de que el texto vacío esté activado / desactivado

Por set android:textOff="" android:textOn=""

 <ToggleButton android:id="@+id/chkState" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/toggle_selector" android:textOff="" android:textOn=""/>

Hacer lo mismo a otro estado