icono - personalizar action bar android studio

¿Cómo personalizar el botón de cambio?

Question

Estoy buscando que Custom The Switch Button se convierta en lo siguiente:

¿Cómo lograr esto?

Answer 1

Hay dos formas de crear ToggleButton personalizado

1) Al definir fondo personalizado 2) Al crear un botón personalizado

Visite http://www.zoftino.com/android-toggle-button para ver los estilos personalizados

Botón de alternar con fondo personalizado

Defina drawable como recurso xml como a continuación y configúrelo como fondo del botón de alternar. En el siguiente ejemplo, drawable toggle_color es un selector de color, necesita definir esto también.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="4dp"
android:insetTop="4dp"
android:insetRight="4dp"
android:insetBottom="4dp">
<layer-list android:paddingMode="stack">
<item>
<ripple android:color="?attr/android:colorControlHighlight">
<item>
<shape android:shape="rectangle"
android:tint="?attr/android:colorButtonNormal">
<corners android:radius="8dp"/>
<solid android:color="@android:color/white" />
<padding android:left="8dp"
android:top="6dp"
android:right="8dp"
android:bottom="6dp" />
</shape>
</item>
</ripple>
</item>
<item android:gravity="left|fill_vertical">
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<size android:width="8dp" />
<solid android:color="@color/toggle_color" />
</shape>
</item>
<item android:gravity="right|fill_vertical">
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<size android:width="8dp" />
<solid android:color="@color/toggle_color" />
</shape>
</item>
</layer-list>
</inset>

Botón de alternar con botón personalizado

Cree sus propias imágenes para dos estados de botón de alternar (asegúrese de que existan imágenes para todos los tamaños de pantallas) y colóquelos en una carpeta dibujable, cree el selector y configúrelo como botón.

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

Answer 2

Logré esto

haciendo:

1) selector personalizado:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_switch_off"
android:state_checked="false"/>
<item android:drawable="@drawable/ic_switch_on"
android:state_checked="true"/>
</selector>

2) usando v7 SwitchCompat

<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:button="@drawable/checkbox_yura"
android:thumb="@null"
app:track="@null"/>

Answer 3

Más información en este enlace: http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-android/

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/toggle_me"/>

y el dibujable será algo así como:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="@drawable/toggle_me_on" /> <!-- checked -->
<item android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked -->
</selector>

Answer 4

Puede usar el widget Switch regular y simplemente llamar a setTextOn() y setTextOff() , o usar los android:textOn y android:textOff .

Answer 5

Sin embargo, esta podría no ser la mejor manera, pero he tomado una forma diferente de resolver mi problema relacionado con Switch. Aquí está mi código:

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

Y aquí está la salida -

Answer 6

Utilizo este enfoque para crear un interruptor personalizado usando un RadioGroup y RadioButton ;

Avance

Recurso de color

<color name="blue">#FF005a9c</color>
<color name="lightBlue">#ff6691c4</color>
<color name="lighterBlue">#ffcdd8ec</color>

Drawables

control_switch_background_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="@android:color/transparent" />
<stroke
android:width="3dp"
android:color="@color/blue" />
</shape>

control_switch_background_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="@color/blue"></solid>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/lighterBlue"></solid>
</shape>
</item>
<item>
<shape>
<solid android:color="@android:color/transparent"></solid>
</shape>
</item>
</selector>

control_switch_background_selector_middle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="@color/blue"></solid>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/lighterBlue"></solid>
</shape>
</item>
<item>
<layer-list>
<item android:top="-1dp" android:bottom="-1dp" android:left="-1dp">
<shape>
<solid android:color="@android:color/transparent"></solid>
<stroke android:width="1dp" android:color="@color/blue"></stroke>
</shape>
</item>
</layer-list>
</item>
</selector>

Diseño

<RadioGroup
android:checkedButton="@+id/calm"
android:id="@+id/toggle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp"
android:layout_marginTop="24dp"
android:background="@drawable/control_switch_background_border"
android:orientation="horizontal">
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/calm"
android:background="@drawable/control_switch_background_selector_middle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="Calm"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector"/>
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/rumor"
android:background="@drawable/control_switch_background_selector_middle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="Rumor"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector"/>
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/outbreak"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/control_switch_background_selector"
android:button="@null"
android:gravity="center"
android:text="Outbreak"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector" />
</RadioGroup>

Answer 7

puede usar el siguiente código para cambiar el color y el texto :

<org.jraf.android.backport.switchwidget.Switch
android:id="@+id/th"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:thumb="@drawable/apptheme_switch_inner_holo_light"
app:track="@drawable/apptheme_switch_track_holo_light"
app:textOn="@string/switch_yes"
app:textOff="@string/switch_no"
android:textColor="#000000"
/>

Crea un xml llamado colors.xml en la carpeta res / values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>

En la carpeta dibujable, crea un archivo xml my_btn_toggle.xml:

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

y en la sección xml que define su botón de alternar, agregue:

android:background="@drawable/my_btn_toggle

para cambiar el color del textOn de textOn y textOff

android:switchTextAppearance="@style/Switch"

Answer 8

<Switch android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/custom_switch_inner_holo_light"
android:track="@drawable/custom_switch_track_holo_light"
android:textOn="@string/yes"
android:textOff="@string/no"/>

drawable / custom_switch_inner_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/custom_switch_thumb_disabled_holo_light" />
<item android:state_pressed="true" android:drawable="@drawable/custom_switch_thumb_pressed_holo_light" />
<item android:state_checked="true" android:drawable="@drawable/custom_switch_thumb_activated_holo_light" />
<item android:drawable="@drawable/custom_switch_thumb_holo_light" />
</selector>

drawable / custom_switch_track_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/custom_switch_bg_focused_holo_light" />
<item android:drawable="@drawable/custom_switch_bg_holo_light" />
</selector>

Las siguientes imágenes son drawwables de 9.paths y deben estar en diferentes densidades (mdpi, hdpi, xhdpi, xxhdpi). Como ejemplo, doy xxhdpi (puedes redimensionarlos si lo necesitas):

drawable / custom_switch_thumb_disabled_holo_light

drawable / custom_switch_thumb_pressed_holo_light

drawable / custom_switch_thumb_activated_holo_light

drawable / custom_switch_thumb_holo_light

drawable / custom_switch_bg_focused_holo_light

drawable / custom_switch_bg_holo_light