Styling/colorazione del pulsante SwitchCompat in Android Lollipop per Material Design

Question

Ho cercato di trovare le risorse che spiegano come modellare il pulsante Switch nel tema Material Design.

Questo collegamento spiega i valori dei colori e i dettagli estetici, ma non dice molto su come ottenerlo impostando determinati attributi in tema di progettazione dei materiali.

http://www.google.com/design/spec/components/switches.html#switches-switch

Se c'è un modo diretto di impostare il colore dello switch, dove sono le drawable trovano che posso usare per fare la mia versione?

Answer 1

Ho cercato di trovare le risorse che spiegavano come posso modificare il pulsante di comando nel tema Material Design.

I widget di colorazione sono ora abbastanza semplici con il nuovo appcompat-v7: 21.

Finché si utilizza appcompat-v7: 21, è possibile sostituire tutti i vecchi widget Switch con i widget SwitchCompat. Pertanto, nei layout xml, anziché utilizzare il vecchio tag Switch, utilizzare android.support.v7.widget.SwitchCompat.

Quindi, nel tuo styles.xml, assicurati che il tema principale della tua app sia un tema Theme.AppCompat come Theme.AppCompat.Light.

Infine, la chiave è quello di specificare il proprio valore per i colorAccent:

<item name="colorAccent">@color/my_fancy_color</item> 

Il colore specificato per colorAccent verrà utilizzata per colorare i widget nella vostra applicazione, come SwitchCompats, EditTexts, RadioButtons, ecc .

Così il vostro styles.xml potrebbe essere simile:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> 
    <!-- colorPrimary is used for the default action bar background --> 
    <item name="colorPrimary">@color/color_primary</item> 

    <!-- colorPrimaryDark is used to color the status bar --> 
    <item name="colorPrimaryDark">@color/color_primary_dark</item> 

    <!-- 
     colorAccent is used as the default value for colorControlActivated 
     which is used to color widgets 
    --> 
    <item name="colorAccent">@color/my_fancy_color</item> 

    <!-- You can also set colorControlNormal, colorControlActivated 
     colorControlHighlight & colorSwitchThumbNormal. --> 
</style> 

dove si trovano i drawable che posso utilizzare per creare la mia versione?

non consiglierei alterare direttamente i drawable, ma si trovano in

sdk/platforms/android-21/data/res/drawable-XXXX

ei file sono chiamati

btn_switch_to_off_mtrl_XXXXX.9.png

btn_switch_to_on_mtrl_XXXXX. 9.png

switc h_track_mtrl_alpha.9.png

Answer 2

Per completare la risposta di JDJ:

C'è un bug con un file corrotto in drawable-HDPI in AppCompat:

https://code.google.com/p/android/issues/detail?id=78262

per risolvere il problema, basta sostituire con questi 2 file:

https://github.com/lopespm/quick-fix-switchcompat-resources

aggiungerli alla vostra directory drawable-hdpi.

XML

<android.support.v7.widget.SwitchCompat 
android:id="@+id/dev_switch_show_dev_only" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
/> 

e niente era necessaria in Java

Answer 3

Nel mio caso, ho voluto solo per lo stile un interruttore particolare, non tutti in app. Ecco come ho fatto che l'utilizzo di AppCompat-V7: 23

di layout xml:

<android.support.v7.widget.SwitchCompat 
       android:id="@+id/switchAffiliateMember" 
       android:theme="@style/Sugar.Switch.Affiliate" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:checked="true" 
       android:textOff="No" 
       android:textOn="Yes" /> 

V21/styles.xml:

<style name="Sugar.Switch.Affiliate" parent="Base.Widget.AppCompat.CompoundButton.Switch"> 
    <item name="colorSwitchThumbNormal">@color/red</item> 
    <item name="colorAccent">@color/white</item> 
</style> 

colorSwitchThumbNormal è lo stato "off", è il colorAccent stato "on". Si noti che nessuno di questi ha un prefisso dello spazio dei nomi "android", non capisco perché, ma funziona solo in questo modo per me.