Определите пользовательский стиль (тему) на компоненте Android Switch

Я новичок в разработке Android, а также в тематике/настройке Android, которая выглядит широкой темой...

Я пытаюсь придать моему компоненту Switch особый внешний вид, но мне не удается достичь того, что я хочу, avan, после просмотра многих ресурсов в Интернете.

Это сводит меня с ума!
Заранее благодарю вас за помощь, Android-мастера!

Контекст

Я работаю над существующим андроидным приложением (v1), которое было minSdkVersion = "8".

В связи с этим приложение использовало сторонние библиотеки для получения панели действий (ActionBar Sherlock) и переключателей (SwitchCompatLibrary):

Сегодня мы делаем версию v2, с minSdkVersion = "14".

Наш клиент также попросит нас изменить внешний вид переключателя по умолчанию.

Цель состоит в том, чтобы иметь переключатели thiese:

Это действительно похоже на новейшие конструкторы материалов, но с оранжевым цветом вместо "зелено-голубого" цвета, например здесь.

Ограничения

Поскольку мы теперь minSdk 14, мы могли бы удалить 2 библиотеки "ActionBarSherlock" и "SwitchCompatLibrary", но это НЕ вариант. Действительно, у нас нет времени для этого...

В самом деле, я попытался добавить в свой проект gradle файлы зависимостей appcompat-v7, чтобы попробовать использовать встроенный компонент switch с материальной темой внутри (см. здесь), но это дает мне ошибки из-за повторяющихся описаний атрибутов с упомянутыми выше двумя libs. Поэтому я не могу использовать его, и я не уверен, что это должно работать...

dependencies {
(...)

compile project(':actionbarsherlock')
compile project(':switchCompatLibrary')
compile files('libs/android-support-v4.jar')

// incompatible avec actionbarsherlock and SwitchCompatLibrary...
// compile "com.android.support:appcompat-v7:22.0.+" 

(...)
}

Существующий код

Итак, вот код действия.

В моем файле layout.xml я использую переключатель SwitchCompatLibrary:

        <de.ankri.views.Switch
            android:id="@+id/switchButtonNotification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true" />

В моем файле themes.xml:

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/switch_light</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

с информацией о стиле, определенной в самой SwitchCompatLibrary, как это

styles.xml:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="switch_light">
        <item name="track">@drawable/switch_track_holo_light</item>
        <item name="thumb">@drawable/switch_inner_holo_light</item>
        <item name="textOn">@string/textOn</item>
        <item name="textOff">@string/textOff</item>
        <item name="thumbTextPadding">12dip</item>
        <item name="switchMinWidth">96dip</item>
        <item name="switchPadding">16dip</item>
        <item name="switchTextAppearance">@style/TextAppearance</item>
    </style>    

    <style name="TextAppearance">
        <item name="textColor">?android:attr/textColorPrimary</item>
        <item name="textColorHighlight">?android:attr/textColorHighlight</item>
        <item name="textColorHint">?android:attr/textColorHint</item>
        <item name="textColorLink">?android:attr/textColorLink</item>
        <item name="textSize">16sp</item>
    </style>
</resources>

switch_inner_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

switch_track_holo_light.xml

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

И вот результат:

Что я пробовал

Используйте собственный переключатель

Как я теперь API 14 минимум, я сначала попытался заменить "de.ankri.views.Switch" на "android.widget.Switch" в моем layout.xml, но стиль больше не применялся (синий активированный переключатель вместо или оранжевый)...

Однако, определяя непосредственно в каждом коммутаторе, тема (как описано здесь), кажется, работает лучше, поскольку у меня есть оранжевый переключатель назад:

    <Switch
        android:id="@+id/switchButtonNotification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:checked="true"
        android:thumb="@drawable/switch_inner_holo_light"
        android:track="@drawable/switch_track_holo_light"
        android:layout_alignParentRight="true" />

Странно... Я не знаю, почему, поэтому я этого не сделаю и сохраняю компонент de.ankri.views.Switch.

Используйте переключатель SwitchCompatLibrary и сделайте мой собственный стиль

Затем я попытался сохранить компонент "de.ankri.views.Switch" и сделать то же самое, что и SwitchCompatLibrary, но переопределив стиль "@style/switch_light" своим собственным, используя новые чертежи для дорожки и большого пальца

themes.xml:

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/Switch.Orange</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

styles.xml:

<style name="Switch.Orange" parent="@style/switch_light">
    <item name="track">@drawable/switch_track_orange</item>
    <item name="thumb">@drawable/switch_thumb_orange</item>
    <item name="textOn">@string/textOn</item>
    <item name="textOff">@string/textOff</item>
    <item name="thumbTextPadding">12dip</item>
    <item name="switchMinWidth">96dip</item>
    <item name="switchPadding">16dip</item>
    <item name="switchTextAppearance">@style/TextAppearance</item>
</style>

switch_thumb_orange.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_normal_orange" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_activated_orange" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_orange" />
    <item                               android:drawable="@drawable/switch_thumb_normal_orange" />
</selector>

switch_thumb_activated_orange.9.png

switch_thumb_normal_orange.9.png

switch_track_orange.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_track_normal_orange" />
    <item android:state_checked="true" android:drawable="@drawable/switch_track_activated_orange" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_track_activated_orange" />
    <item                               android:drawable="@drawable/switch_track_normal_orange" />
</selector>

switch_track_activated_orange.9.png

switch_track_normal_orange.9.png

Результаты:

И результат просто AWFUL!!:

Где я ошибаюсь? Я попытался изменить "thumbTextPadding", "switchMinWidth" и "switchPadding" в styles.xml, но без хороших результатов.

Возможно, мои файлы с 9 патчами ошибочны?

Ответ 1

В этом сообщении описано, что вам нужно: http://www.materialdoc.com/switch/

Если раскраска не работает (api < 21), взгляните на fooobar.com/questions/91484/...

Надеюсь, это поможет вам!

Ответ 2

В качестве первого шага я предлагаю вам заменить actionBarSherlock на support.v7.app.ActionBar. (https://developer.android.com/reference/android/support/v7/app/ActionBar.html)

Эта миграция требует определенного времени, потому что вы должны переопределить свой существующий стиль. В моей памяти, когда я сделал аналогичную миграцию, код стиля v7 выглядит как стиль actionBarSherlock. В это время v7 ActionBar был назван ActionBarCompat.

Ответ 3

Вы можете попробовать следующее:

Сделайте изображение для фона вашего коммутатора.
Это должно иметь высоту, равную высоте вашего круга.
И верх и нижняя часть изображения должны выглядеть так: