titulo studio personalizar icono editar color cambiar bar agregar actionbar android android-button android-styles android-switch

icono - personalizar action bar android studio



¿Cómo personalizar el botón de cambio? (8)

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>

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

¿Cómo lograr esto?


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


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>


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


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 -


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>


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"


<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